如何通过 CSS 向 HTML 页面添加标题？

Posted 2023-04-14

【中文标题】如何通过 CSS 向 HTML 页面添加标题？

【英文标题】：How could I add a header to a HTML page via CSS?

【发布时间】：2015-11-23 08:29:52

【问题描述】：

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

例如，假设我想在此处添加一些非常简单的标题，有点像顶部的“ATLAS 简报”栏，我将如何在 CSS 中而不是在页面的 HTML 中做到这一点？：

【问题讨论】：

可以用css3添加内容

您不应该仅通过 CSS 添加标记。 CSS 仅用于样式化已有的内容。

【参考方案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;

输出：

【讨论】：

content 属性接受 URL，但 MDN docs 的确切含义相当模糊。

是的，我明白了。但我认为 OP 只想在此处添加文本，而不是 URL，除非 OP 想进一步澄清。