使用 CSS 生成的内容
本文介绍了一些在显示文档时可以使用 CSS 添加内容的方法。您可以修改样式表来添加文本内容或图像。
CSS 的一个重要优点是它有助于将文档的样式与其内容分离。但是，在某些情况下，将某些内容指定为样式表的一部分而不是文档的一部分是合理的。当内容与文档结构紧密相关时，您可以在样式表中指定文本或图像内容。
注意： 在样式表中指定的内容不会成为 DOM 的一部分。
在样式表中指定内容可能会导致复杂性。例如，您的文档可能有不同的语言版本，它们共享一个样式表。如果您在样式表中指定了需要翻译的内容，则必须将样式表的这些部分放在不同的文件中，并安排将它们与相应语言版本的文档链接起来。
如果您指定的内容是适用于所有语言和文化的符号或图像，则不会出现此问题。
示例
文本内容
CSS 可以在元素之前或之后插入文本内容，或者更改列表项标记（如项目符号或数字）的内容，该标记位于 <li> 或其他具有 display: list-item; 的元素之前。要指定此项，请创建一个规则，并在选择器中添加 ::before、::after 或 ::marker。在声明中，将 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，但也可以在链接、样式表本身或其他方式中指定。有关详细信息，请参阅 @charset 参考。
也可以通过使用反斜杠作为转义字符的转义机制来指定单个字符。例如，“\265B”是黑后 ♛ 的国际象棋符号。
图像内容
要在元素之前或之后添加图像，您可以在 content 属性的值中指定图像文件的 URL。
此规则会在每个具有 glossary 类的链接后面添加一个空格和一个图标
HTML
html
<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>
CSS
css
a.glossary::after {
content: " " url("glossary-icon.gif");
}