如何通过 CSS 将 header 添加到 HTML 页面？

Question

有一个脚本使用 Pandoc 生成输入 Markdown 文件的 HTML 表示。假设我对 HTML 表示的唯一控制是单个 CSS 文件的规范，我如何将站点 title/header 添加到 HTML?

例如，假设我想添加一些非常简单的标题，有点像顶部的 "ATLAS Briefings" 栏，我该如何在 CSS 中添加，而不是在 [=页面的 24=]?:

Answer 1

在 ::after 或 ::before 伪元素中使用 content 属性添加额外的文本。

您也可以使用 absolute 和 top/bottom、left/right 属性将其定位到其他位置。

#site-title::after {
  content: "Another Title";
  /* If you need to position it, uncomment and modify the below values
  position: absolute;
  top: -5px; 
  left: 20px */
}

/* Add below rule if you need to position the additional text w.r.t to the current title */
#site-title{
  position: relative;
}

输出：

如何通过 CSS 将 header 添加到 HTML 页面？

How could I add a header to a HTML page via CSS?

html

css

title

pandoc

heading