使用 CSS 生成内容

本文介绍了在显示文档时使用 CSS 添加内容的一些方法。你修改样式表以添加文本内容或图片。

¥This article describes some ways in which you can use CSS to add content when a document is displayed. You modify your stylesheet to add text content or images.

CSS 的重要优点之一是它可以帮助你将文档的样式与其内容分开。但是，在某些情况下，将某些内容指定为样式表的一部分而不是文档的一部分是有意义的。当样式表中的文本或图片内容与文档的结构紧密链接时，你可以指定该内容。

¥One of the important advantages of CSS is that it helps you to separate a document's style from its content. However, there are situations where it makes sense to specify certain content as part of the stylesheet, not as part of the document. You can specify text or image content within a stylesheet when that content is closely linked to the document's structure.

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

¥Note: Content specified in a stylesheet does not become part of the DOM.

在样式表中指定内容可能会导致复杂化。例如，你的文档可能有共享样式表的不同语言版本。如果你在样式表中指定需要翻译的内容，则必须将样式表的这些部分放在不同的文件中，并安排它们与文档的适当语言版本链接。

¥Specifying content in a stylesheet can cause complications. For example, you might have different language versions of your document that share a stylesheet. If you specify content in your stylesheet that requires translation, you have to put those parts of your stylesheet in different files and arrange for them to be linked with the appropriate language versions of your document.

如果你指定的内容包含适用于所有语言和文化的符号或图片，则不会出现此问题。

¥This issue does not arise if the content you specify consists of symbols or images that apply in all languages and cultures.

示例

¥Examples

文字内容

¥Text content

CSS 可以在元素之前或之后插入文本内容，或者使用 display: list-item; 更改 <li> 或其他元素之前的列表项标记的内容（例如项目符号或数字）。要指定这一点，请制定规则并将 ::before、::after 或 ::marker 添加到选择器。在声明中，指定 content 属性，并将文本内容作为其值。

¥CSS can insert text content before or after an element, or change the content of a list item marker (such as a bullet symbol or number) before a <li> or other element with display: list-item;. To specify this, make a rule and add ::before, ::after, or ::marker to the selector. In the declaration, specify the content property with the text content as its value.

HTML

html

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

CSS

css

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

输出

¥Output

样式表的字符集默认为 UTF-8，但也可以在链接、样式表本身或其他方式中指定。详细信息请参见 CSS 规范中的 4.4 CSS 样式表表示。

¥The character set of a stylesheet is UTF-8 by default, but it can also be specified in the link, in the stylesheet itself, or in other ways. For details, see 4.4 CSS style sheet representation in the CSS Specification.

单个字符也可以通过使用反斜杠作为转义字符的转义机制来指定。例如，"\265B" 是黑皇后 ♛ 的国际象棋符号。详细信息请参见 CSS 规范中的引用未在字符编码中表示的字符和人物与案例。

¥Individual characters can also be specified by an escape mechanism that uses backslash as the escape character. For example, "\265B" is the chess symbol for a black queen ♛. For details, see Referring to characters not represented in a character encoding and Characters and case in the CSS Specification.

图片内容

¥Image content

要在元素之前或之后添加图片，你可以在 content 属性的值中指定图片文件的 URL。

¥To add an image before or after an element, you can specify the URL of an image file in the value of the content property.

此规则在每个具有 glossary 类的链接后添加一个空格和一个图标：

¥This rule adds a space and an icon after every link that has the class glossary:

HTML

html

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

CSS

css

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