使用 CSS 添加文档内容

本文介绍了一些通过 CSS 改变文档内容的方法。这样，仅修改样式表你就能把文本内容及图片添加到文档。

CSS 的一个重要优势是它可以帮助你将文档内容和其样式分离。但是有时候在样式而非文档中定义一些内容也是很有用的。当内容与文档结构紧密相关的时候，你可以在样式表中定义文本和图片内容。

备注： 样式表中指定的内容不会成为 DOM 的一部分。

在样式表中指定内容会使事情变得复杂：你可能有多个语言版本的文档共享同一个样式表。如果样式表的一部分需要翻译，这就意味着你需要将这部分单独保存在多个样式表中，并在不同语言的文档中引用。

如果你指定的内容由通用符号和图片组成的话，就不存在这个问题。

示例

文本内容

CSS 可以在元素的前后插入文本：在选择器的后面加上 ::before 或 ::after。在声明中，指定 content 属性，并设置文本内容。

HTML

html
A text where I need to <span class="ref">something</span>

CSS

css
.ref::before {
  font-weight: bold;
  color: navy;
  content: "Reference ";
}

结果

样式表默认使用 UTF-8 字符集。但也可以通过 link 属性或样式表以及其他方式指定其他字符集。参见 CSS 规范中的 4.4 CSS style sheet representation。

还可以通过转义机制（通过反斜杠转义）指定单个字符。比如，“\265B”是国际象棋黑皇后的符号 ♛。详细内容请参见 Referring to characters not represented in a character encoding 和 CSS 规范中的 Characters and case。

图片内容

可以通过将 content 属性值设置为某个图片的 URL，可以将图片插到元素的前面或后面。

下面这条规则在所有类名包含 glossary 的 a 标签后面插入一个空格和一个图标：

HTML

html
<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>

CSS

css
a.glossary::after {
  content: " " url("glossary-icon.gif");
}

结果