CSS Content 属性用于将元素或伪元素的内容替换为生成的值，以便更改显示的输出。
- 它管理元素的正常呈现方式，或者何时使用图像和相关的 alt 文本代替元素。
- 它将内容定义为图片、文本、两者兼而有之，或者在伪元素和边距框的情况下根本不是，从而决定元素是否呈现。
- 匿名替换的元素是使用 content 属性引入的元素。
可能的值
- none - 当直接应用于元素时，它不起作用;当用于伪元素时，它不会生成伪元素。
- normal - 页面边距框和普通元素的默认值为 contents，但伪元素（如 ::before 和 ::after ）的计算为零。
- <string> - 字符串是封装在匹配的单引号或双引号中的字符序列。在 CSS 中可以连接多个字符串值，而无需特殊的连接运算符。
- <image> - CSS 中的可显示图像由 <image> 表示，它可以作为 image-set（）、<gradient>、url（） 或由 element（） 函数定义的网页本身的一部分给出。
- <counter> - 在 CSS 中，计数器（通常是数字）通过 <counter-reset> 和 <counter-increment> 属性生成，由 <counter> 值表示，可以使用 counter（） 或 counters（） 方法显示。
- counter（） - 类似于 counter（name） 或 counter（name， style），显示具有指定样式 <list-style-type>（默认为十进制）的文本，该样式表示伪元素范围内具有给定名称的最内层计数器的值。
- 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>Featured Online Courses</h2>
<ul>
<li class="featured">Web Development Bootcamp</li>
<li class="course-item">Data Science Essentials</li>
<li>Graphic Design Mastery</li>
<li class="course-item">Digital Marketing Fundamentals</li>
</ul>
</body>
</html>
CSS Content - 行情
在以下示例中，引号文本由对比鲜明的彩色引号整齐地框住，从而增加了其视觉效果。
- 使用较大的红色引号和浅灰色背景，与绿色文本形成对比。
- 生成的引号类型取决于语言，可以通过将 content 属性值设置为 no-open-quote 和/或 no-close-quote 来关闭，或者将 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>Welcome to the Wisdom Corner</h1>
<p>Albert Einstein once said, <q cite="https://www.brainyquote.com/quotes/albert_einstein_133991"> The only source of knowledge is experience.</q> Let's embrace our experiences and learn from them to gain wisdom.</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> 之间的计数器为其中的列表项创建详细的标记。
- 在此示例中，通过在两个<字符串>之间放置计数器，为无序列表中的列表项创建详细标记。
- 内容中的每个项目都有一个前缀、一个空格、一个空格、一个冒号和另一个空格。在大多数浏览器中，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 伪元素，它将 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="https://tutorialspoint.com/bootstrap/">Bootstrap</a></li>
<li><a href="https://www.qikepu.com/html">HTML</a></li>
<li><a href="hhttps://www.qikepu.com/css">CSS</a></li>
<li><a href="https://www.qikepu.com/javascript">Javascript</a></li>
</ul>
</nav>
</body>
</html>
CSS 自定义 - 添加带有替代文本的图像
在以下示例中，a：：before 伪元素用于在链接文本之前插入图像。
对于不启用图像渲染的浏览器，它包含占位符图片形式的替代文本和回退材料。
<html>
<head>
<style>
a::before {
/* Fallback content */
content: url("https://www.qikepu.com/css/images/css-mini-logo.jpg")
" - alt text is not supported - ";
/* Content with alternative text */
content: url("https://www.qikepu.com/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.qikepu.com/"> Explore Example Website</a>
</body>
</html>
CSS content - 用 url（） 替换元素
在给出的示例中，content： url（） CSS 属性用于动态替换 #custom 替换元素的内容，并使用 URL“content.png”提供的图像。此外，如果不允许替换元素，则 span：：after 选择器会提供回退功能，该选择器会在括号中显示元素的 ID 属性。
<html>
<head>
<style>
#custom-replacement {
height: 300px;
width: 300px;
content: url("images/content.png");
}
/* Fallback content in case element replacement is supported */
span::after {
content: " (ID: " attr(id) ")";
color: #888;
}
</style>
</head>
<body>
<span id="custom-replacement">This content is replaced!</span>
</body>
</html>
CSS content - 用<梯度>替换元素
在以下示例中，元素的内容被 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">Click Here</div>
</body>
</html>
