使用 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");
}