CSS3 高级特性 - content 属性
1. 什么是 content 属性？
content 属性是 CSS 中用于在伪元素（::before 和 ::after）中插入内容的属性。它是 CSS 伪元素功能的核心部分，允许开发者在元素的前后插入文本、图像、计数器值等内容，而无需修改 HTML 结构。
2. content 属性的语法
content: normal | none | [ <string> | <image> | <counter> | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+;2.1 取值说明
- normal：默认值，伪元素不产生任何内容
- none：伪元素不产生任何内容
- **
**：字符串，直接插入文本内容 - **
**：图像，可以是 url()、linear-gradient() 等 - **
**：计数器，使用 counter() 或 counters() 函数 - **attr()**：属性值，获取元素的属性值
- open-quote：插入开始引号
- close-quote：插入结束引号
- no-open-quote：不插入开始引号，但增加引号嵌套级别
- no-close-quote：不插入结束引号，但减少引号嵌套级别
2.2 组合使用
content 属性可以组合使用多个值，例如：
content: "前缀 " attr(data-text) " 后缀";3. 核心知识点
3.1 content 属性的作用
content 属性的主要作用是：
- 在伪元素中插入文本内容
- 在伪元素中插入图像
- 在伪元素中显示计数器的值
- 在伪元素中显示元素的属性值
- 插入引号
- 与其他 CSS 属性配合创建各种效果
3.2 与伪元素的关系
content 属性通常与 ::before 和 ::after 伪元素配合使用：
- ::before：在元素内容前插入内容
- ::after：在元素内容后插入内容
如果伪元素没有设置 content 属性，或者 content 属性值为 normal 或 none，则伪元素不会显示。
3.3 content 属性的使用场景
content 属性主要用于以下场景：
- 添加装饰性文本：如添加前缀、后缀、图标等
- 创建自定义列表标记：替代默认的列表项目符号
- 显示计数器值：如章节编号、步骤编号等
- 显示元素属性值：如显示链接的 href 属性值
- 创建特殊效果：如清除浮动、创建形状等
- 添加引号：为引用文本添加引号
4. 实用案例
4.1 基本文本内容
HTML 结构：
<div class="text-content">
<p>这是一段普通文本</p>
<p class="highlight">这是一段需要强调的文本</p>
<p>这是另一段普通文本</p>
</div>CSS 样式：
.highlight {
position: relative;
display: inline-block;
}
.highlight::before {
content: "【";
color: red;
font-weight: bold;
}
.highlight::after {
content: "】";
color: red;
font-weight: bold;
}4.2 使用图像
HTML 结构：
<div class="image-content">
<a href="#" class="social-link facebook">Facebook</a>
<a href="#" class="social-link twitter">Twitter</a>
<a href="#" class="social-link instagram">Instagram</a>
</div>CSS 样式：
.social-link {
display: inline-block;
padding-left: 30px;
margin-right: 20px;
position: relative;
text-decoration: none;
color: #333;
}
.social-link::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.social-link.facebook::before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233b5998"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg>');
}
.social-link.twitter::before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231da1f2"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>');
}
.social-link.instagram::before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e4405f"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>');
}4.3 使用 attr() 函数
HTML 结构：
<div class="attr-content">
<button data-tooltip="点击提交表单">提交</button>
<a href="https://example.com" data-text="访问示例网站">链接</a>
<div data-count="5" class="badge">通知</div>
</div>CSS 样式：
/* 工具提示效果 */
[data-tooltip] {
position: relative;
cursor: help;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
margin-bottom: 5px;
}
[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
}
/* 链接文本效果 */
a[data-text]::after {
content: " (" attr(data-text) ")";
font-size: 12px;
color: #666;
}
/* 徽章效果 */
.badge {
position: relative;
display: inline-block;
padding: 5px 10px;
background-color: #f5f5f5;
border-radius: 4px;
}
.badge::before {
content: attr(data-count);
position: absolute;
top: -10px;
right: -10px;
background-color: red;
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}4.4 使用计数器
HTML 结构：
<div class="counter-content">
<h2>步骤指南</h2>
<div class="step">准备材料</div>
<div class="step">开始操作</div>
<div class="step">完成收尾</div>
</div>CSS 样式：
.counter-content {
counter-reset: step-counter;
}
.step {
counter-increment: step-counter;
margin-bottom: 15px;
padding-left: 40px;
position: relative;
}
.step::before {
content: "步骤 " counter(step-counter) ": ";
position: absolute;
left: 0;
font-weight: bold;
color: #333;
}4.5 使用引号
HTML 结构：
<div class="quote-content">
<blockquote>
<p>这是一段引用文本，展示了 content 属性如何插入引号。</p>
<blockquote>
<p>这是嵌套的引用文本，展示了引号的嵌套效果。</p>
</blockquote>
</blockquote>
</div>CSS 样式：
blockquote {
quotes: """" "''";
margin: 20px;
padding: 10px 20px;
background-color: #f5f5f5;
border-left: 4px solid #333;
}
blockquote::before {
content: open-quote;
font-size: 24px;
color: #666;
margin-right: 5px;
}
blockquote::after {
content: close-quote;
font-size: 24px;
color: #666;
margin-left: 5px;
}
blockquote p {
display: inline;
}4.6 清除浮动
HTML 结构：
<div class="clearfix">
<div class="float-left">左侧浮动元素</div>
<div class="float-right">右侧浮动元素</div>
</div>
<div class="clearfix">
<p>这段文本应该显示在浮动元素下方，而不是被浮动元素覆盖。</p>
</div>CSS 样式：
.float-left {
float: left;
width: 48%;
background-color: #f0f0f0;
padding: 10px;
margin-right: 2%;
}
.float-right {
float: right;
width: 48%;
background-color: #f0f0f0;
padding: 10px;
margin-left: 2%;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}5. 浏览器兼容性
| 浏览器 | 支持情况 |
|---|---|
| Chrome | 1+ |
| Firefox | 1+ |
| Safari | 1+ |
| Edge | 12+ |
6. 最佳实践
与伪元素配合使用：content 属性通常与 ::before 和 ::after 伪元素配合使用
合理使用内容类型：根据需要选择合适的内容类型，如文本、图像、计数器等
避免过度使用：只在需要的情况下使用 content 属性，不要过度使用伪元素
考虑可访问性：使用 content 属性插入的内容可能不会被屏幕阅读器读取，需要考虑可访问性
结合其他 CSS 属性：content 属性可以与其他 CSS 属性（如 position、color、font-size 等）配合使用，创建各种效果
7. 代码优化建议
使用简洁的语法：当只需要插入简单文本时，使用简洁的语法
避免复杂的组合：虽然 content 属性可以组合多个值，但过于复杂的组合会降低代码可读性
考虑性能：使用图像作为 content 值时，需要考虑图像的大小和加载性能
测试不同浏览器：不同浏览器对 content 属性的支持可能存在细微差异，特别是在使用复杂值时
结合 CSS 变量：可以考虑使用 CSS 变量来存储 content 属性的值，增加代码的可维护性
8. 总结
content 属性是 CSS 中一个非常实用的高级特性，它是伪元素功能的核心部分。通过 content 属性，开发者可以在伪元素中插入文本、图像、计数器值等内容，而无需修改 HTML 结构。content 属性支持多种取值类型，可以组合使用，与其他 CSS 属性配合创建各种效果，如工具提示、徽章、自定义列表标记等。合理使用 content 属性可以使代码更加简洁、语义化，同时实现各种丰富的视觉效果。
9. 练习
练习 1：创建一个带有工具提示效果的按钮，使用 content 和 attr() 函数显示按钮的 data-tooltip 属性值
练习 2：创建一个自定义列表，使用 content 和计数器显示列表项的编号
练习 3：创建一个带有徽章效果的通知元素，使用 content 和 attr() 函数显示通知数量
练习 4：创建一个引用文本效果，使用 content 和引号显示嵌套的引用
练习 5：创建一个清除浮动的 clearfix 类，使用 content 属性实现