使用 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，但也可以在链接、样式表本身或其他方式中指定。有关详细信息，请参阅 CSS 规范中的`4.4 CSS 样式表表示`。

单个字符也可以通过使用反斜杠作为转义字符的转义机制来指定。例如，“\265B”是黑后♛的国际象棋符号。有关详细信息，请参阅 CSS 规范中的`引用字符编码中未表示的字符`和`字符和大小写`。

图像内容

要在元素之前或之后添加图像，您可以在`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");
}