CSS 属性content用于将元素或伪元素的内容替换为生成的值，以更改显示的输出。
它管理元素的正常呈现方式，或者何时使用图像和相关替代文本来代替元素。
它将内容定义为图片、文本，或者两者都定义，或者在伪元素和边距框的情况下根本不定义内容，从而决定元素是否完全渲染。
匿名替换的元素是使用 content 属性引入的元素。
可能的值
- none - 直接应用于元素时没有效果；当用于伪元素时，它不会生成伪元素。
- normal - 页边距框和普通元素具有默认值content，但伪元素（例如::before和::after ）计算为 none。
- <string> - 字符串是封装在匹配的单引号或双引号中的字符序列。在 CSS 中可以连接多个字符串值，而不需要特殊的连接运算符。
- <image> - CSS 中的可显示图像由<image>表示，它可以作为image-set()、<gradient>、 url()或由element()定义的网页本身的一部分给出功能。
- <counter> - 在 CSS 中，计数器通常是数字并通过<counter-reset>和<counter-increment>属性生成，由 <counter> 值表示，并且可以使用counter()或counters()方法显示。
- counter() - CSS counter()函数，格式类似于counter(name)或counter(name, style)，显示具有指定样式<list-style-type>（默认为十进制）的文本，该样式表示最内层的值在伪元素范围内使用给定名称进行计数器。
- counters() - CSS counters()函数，以counter(name, string)或counter(name, string, style)形式，生成文本，显示伪元素中具有指定名称的最里面计数器的值，格式为提供的<list-style-type>，默认选择十进制。
- <quote> - <quote>数据类型中包含根据语言和位置而变化的关键字。
- open-quote 和 close-quote - 在quotes属性中定义的匹配字符串用于替换这些值。
- no-open-quote 和 no-close-quote - 不添加内容，但调整引号的嵌套级别，增加或减少它。
- attr(x) - CSS 函数attr(x)从源或选定元素中检索属性的值，根据文档语言生成空字符串或未解析的字符串。
- alternative text：/ <string> | <counter> - 在支持它的浏览器中，在<content-list>项中的文本字符串或计数器之前使用正斜杠作为替代文本，这适用于屏幕阅读器，但在不支持的浏览器中可能会被忽略，使用<string>或< counter>指示替代文本。
语法
content = normal | none | [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> ]+ ]? | <element()> 适用范围
所有元素、遵守树形的伪元素和页边距框
CSS content: 追加字符串
在以下示例中，字符串根据分配的类动态附加到列表项的内容。
<html>
<head>
<style>
.featured::before {
content: "Top Pick: ";
font-weight: bold;
color: #4CAF50;
}
.course-item {
position: relative;
}
.course-item::after {
content: " Enroll Now!";
position: absolute;
bottom: 0;
right: 0;
font-style: italic;
color: #1565c0;
}
</style>
</head>
<body>
<h2>易学教程</h2>
<ul>
<li class="featured">CSS 教程</li>
<li class="course-item">Java 教程</li>
<li>HTML教程</li>
<li class="course-item">CSS教程</li>
</ul>
</body>
</html> CSS content: 引号
在下面的例子中，引用文本由对比色的引号整齐地框起来，增加了视觉效果。
使用更大的红色引号和浅灰色背景与引用的绿色文本形成对比。
生成的引用类型取决于语言，可以通过将内容属性值设置为 no-open-quote 和no-close-quote，或两者都为 none，或者将quotes 属性设置为 none。
<html>
<head>
<style>
q {
color: #008000;
}
q::before,
q::after {
font-size: larger;
color: #800000;
background: #f0f0f0;
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>Albert Einstein once said, <q cite="https://www.brainyquote.com/quotes/albert_einstein_133991"> 知识的唯一来源是经验。</q> 让我们拥抱我们的经验并从中学习以获得智慧。</p>
<p lang="de-de"> In einem berühmten Zitat sagte Johann Wolfgang von Goethe, <q lang="de-de"> Man sieht nur das, was man weiß. </q>. This reminds us that knowledge shapes our perception.</p>
<p>As we navigate the vast sea of information on the internet,<q> It's crucial to distinguish between knowledge and misinformation.</q> Let's be discerning in our digital journeys.</p>
<p lang="es-es"> En palabras de Pablo Picasso, <q lang="es-es"> La inspiración existe, pero tiene que encontrarte trabajando. </q>. True creativity often comes from the dedication to our craft.</p>
<footer><p>Stay curious and keep exploring the depths of knowledge!</p></footer>
</body>
</html> CSS content: 将文本添加到列表项计数器
以下示例使用夹在两个 <strings> 之间的计数器来为其中的列表项创建详细标记。
在此示例中，通过在两个 <strings> 之间放置一个计数器来创建无序列表中列表项的详细标记。
内容中的每个项目都有一个前缀、一个空格、:、冒号，还有另一个空间。在大多数浏览器中，counters() 方法定义一个用句点分隔的数字项目计数器。
<html>
<head>
<style>
div {
background-color: #f0f0f0;
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
h2 {
color: #008080;
}
ol {
counter-reset: chapters;
margin-left: 4em;
}
li {
counter-increment: chapters;
}
li::marker {
content: "Chapter " counters(chapters, ".", decimal-leading-zero) ": ";
color: #800000;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<h2>Contents</h2>
<ol>
<li>Introduction</li>
<li>Part I: The Adventure Starts
<ol>
<li>Setting the Scene.</li>
<li>Getting to know the Characters.</li>
<li>Revealing Secrets.</li>
</ol>
</li>
<li>Part II: Difficulties Are Ahead.
<ol>
<li>Taking On Opponents.</li>
<li>Getting around in the Dark.</li>
<li>Gathering Supporters.</li>
</ol>
</li>
<li>Conclusion</li>
</ol>
</div>
</body>
</html> CSS content: 具有属性值的字符串
以下示例使用属性选择器来定位安全链接，并专为打印样式表而设计。
使用 ::after 伪值-element，它会在链接内容后面附加 href 属性的值。
生成的内容显示为 URL:[href value]，并用括号括起来，这提高了安全链接以适合打印的格式呈现。
<html>
<head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f8f8;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #2c3e50;
color: #ecf0f1;
padding: 1em;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin: 0.5em 0;
}
a {
text-decoration: none;
color: #3498db;
font-weight: bold;
}
a:hover {
color: #e74c3c;
}
a[href^="https://"]::after {
content: " (Explore: " attr(href) ")";
color: #27ae60;
font-style: italic;
font-size: 0.8em;
margin-left: 0.5em;
}
</style>
</head>
<body>
<header>
<h1>Web Adventures</h1>
</header>
<nav>
<ul>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</nav>
</body>
</html> CSS 自定义: 添加带有替代文本的图像
在以下示例中， a::before 伪元素用于在链接文本之前插入图像。
对于不启用图像渲染的浏览器，它包含占位符图片形式的替代文本和后备材料.
<html>
<head>
<style>
a::before {
/* Fallback content */
content: url("/css/images/css-mini-logo.jpg")
" - alt text is not supported - ";
/* 带有替代文本的内容 */
content: url("/css/images/css-mini-logo.jpg") /
" VISIT EXAMPLE: ";
font: italic small-caps 25px/2.5 'Georgia', serif;
margin-right: 10px;
}
</style>
</head>
<body>
<a href="https://www.yxjc123.com/">易学教程</a>
</body>
</html> CSS content: 使用 url() 进行元素替换
在给出的示例中，content: url() CSS 属性用于将 #custom-replacement 元素的内容动态替换为 URL“content.png”提供的图像。此外，如果不允许元素替换，则由 span::after 选择器提供后备，该选择器在括号中显示元素的 ID 属性。
<html>
<head>
<style>
#custom-replacement {
height: 300px;
width: 300px;
content: url("/css/images/content.png");
}
/* 支持元素替换时的后备内容 */
span::after {
content: " (ID: " attr(id) ")";
color: #888;
}
</style>
</head>
<body>
<span id="custom-replacement">这个内容被替换!</span>
</body>
</html> CSS content: 使用 <gradient> 进行元素替换
在下面的示例中，元素的内容被 CSS 渐变替换，更准确地说，是 Linear-gradient()。
对于同时启用元素内容替换和替代文本的浏览器， @supports规则用于提供替代文本支持并引入repeating-linear-gradient()。
<html>
<head>
<style>
.container {
border: 2px solid #e74c3c;
background-color: #f9e79f;
min-height: 200px;
min-width: 200px;
padding: 20px;
}
#altered {
content: linear-gradient(#3498db, #2ecc71);
}
@supports (content: linear-gradient(#000, #fff) / "custom content") {
#altered {
content: repeating-linear-gradient(rgba(52, 152, 219, 0.8) 0, #e67e22 20%) /
"Transformed styling with custom content";
}
}
</style>
</head>
<body>
<div class="container" id="altered">点击这里</div>
</body>
</html>