CSS ::before/::after 实战：5个场景解析 content 属性的 3 种高级用法
CSS ::before/::after 实战：5个场景解析 content 属性的 3 种高级用法
当你在浏览网页时，是否注意过那些精致的图标提示、自动编号的列表或是图片加载失败时的优雅降级效果？这些看似简单的界面细节，背后往往隐藏着CSS伪元素的魔法。作为前端开发者，掌握::before和::after伪元素的高级用法，能让你在减少DOM节点的同时，实现更丰富的视觉效果。
1. 动态属性注入：content: attr() 的实战应用
attr()函数可能是伪元素中最被低估的功能之一。它允许你直接将HTML元素的属性值提取到CSS中，实现动态内容展示。这种技术特别适合需要根据数据状态动态更新样式的场景。
1.1 图片加载失败的优雅降级
传统做法中，当图片加载失败时，浏览器会显示破碎的图标和alt文本。通过attr()，我们可以创建更专业的错误提示：
<img src="non-existent.jpg" alt="风景照片" >.enhanced-image { position: relative; min-width: 200px; min-height: 150px; background: #f5f5f5; } .enhanced-image::before { content: url('broken-image-icon.svg'); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .enhanced-image::after { content: attr(data-error) ": " attr(alt); position: absolute; bottom: 0; width: 100%; text-align: center; color: #666; padding: 8px; font-size: 14px; }关键点解析：
- 使用
min-width/height确保容器尺寸稳定 ::before插入SVG图标作为视觉提示::after组合显示自定义错误信息和alt文本- 通过绝对定位实现图层叠加效果
1.2 动态Tooltip提示
无需JavaScript，仅用CSS就能实现简单的提示功能：
<button >.tooltip-btn { position: relative; } .tooltip-btn:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 6px 12px; border-radius: 4px; white-space: nowrap; font-size: 14px; margin-bottom: 8px; } .tooltip-btn:hover::before { content: ""; position: absolute; bottom: calc(100% - 5px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #333; }效果增强技巧：
- 添加过渡动画：
transition: opacity 0.3s ease - 支持多行文本：
white-space: normal; width: 200px - 暗黑模式适配：
@media (prefers-color-scheme: dark)
2. 自动计数系统：content: counter() 的进阶技巧
CSS计数器提供了强大的自动编号能力，远比使用有序列表更灵活。让我们看看如何超越基础用法。
2.1 多级目录编号
创建类似文档的多级标题编号系统：
body { counter-reset: chapter section subsection; } h2 { counter-increment: chapter; counter-reset: section; } h3 { counter-increment: section; counter-reset: subsection; } h4 { counter-increment: subsection; } h2::before { content: counter(chapter) ". "; } h3::before { content: counter(chapter) "." counter(section) " "; } h4::before { content: counter(chapter) "." counter(section) "." counter(subsection) " "; }样式优化建议：
- 添加右间距：
margin-right: 8px - 设置不同颜色：
color: #6c757d - 调整字体粗细：
font-weight: normal
2.2 交互式步骤指示器
结合复选框实现动态步骤跟踪：
<div class="steps"> <input type="checkbox" id="step1" checked> <label for="step1">填写基本信息</label> <input type="checkbox" id="step2"> <label for="step2">验证邮箱</label> <input type="checkbox" id="step3"> <label for="step3">完成注册</label> </div>.steps { counter-reset: step; } .steps label { position: relative; padding-left: 30px; margin-right: 20px; } .steps label::before { counter-increment: step; content: counter(step); position: absolute; left: 0; width: 24px; height: 24px; border: 2px solid #dee2e6; border-radius: 50%; text-align: center; line-height: 24px; color: #6c757d; } input:checked + label::before { background: #007bff; color: white; border-color: #007bff; } input:checked + label::after { content: "✓"; position: absolute; left: 7px; color: white; font-size: 12px; }交互增强：
- 添加过渡效果：
transition: all 0.3s ease - 禁用样式：
input:disabled + label::before - 错误状态：
input:invalid + label::before
3. 动态资源加载：content: url() 的创意应用
url()函数不仅能加载图片，还能与CSS变量结合实现主题切换等高级功能。
3.1 主题化图标系统
:root { --icon-check: url('icons/check-light.svg'); --icon-arrow: url('icons/arrow-right-light.svg'); } [data-theme="dark"] { --icon-check: url('icons/check-dark.svg'); --icon-arrow: url('icons/arrow-right-dark.svg'); } .icon-check::before { content: var(--icon-check); display: inline-block; width: 16px; height: 16px; } .btn-next::after { content: var(--icon-arrow); margin-left: 8px; }性能优化：
- 使用SVG雪碧图减少HTTP请求
- 添加
aria-hidden="true"提升可访问性 - 考虑使用
<use>替代CSS加载SVG
3.2 响应式图片切换
根据设备像素比加载不同分辨率图片：
.hero::before { content: url('hero-lowres.jpg'); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .hero::before { content: url('hero-highres.jpg'); } }现代替代方案：
- 使用
<picture>元素更语义化 - 考虑使用
image-set()函数 - 配合
object-fit控制图片显示
4. 复合内容生成：组合多种content值
将多种content值组合使用，可以创造出更丰富的效果。
4.1 带计数器的引用样式
blockquote { counter-increment: quote; position: relative; padding-left: 60px; } blockquote::before { content: "“" counter(quote) "”"; position: absolute; left: 0; font-size: 60px; line-height: 1; color: #eee; } blockquote::after { content: "— " attr(data-author); display: block; text-align: right; font-style: italic; color: #666; }排版技巧：
- 使用
quotes属性定义自定义引号 - 添加
max-width控制行长 - 考虑使用
ch单位设置缩进
4.2 表单验证提示
<input type="email" >.validated-input:invalid::after { content: attr(data-error); display: block; color: #dc3545; font-size: 12px; margin-top: 4px; } .validated-input:valid::before { content: url('checkmark.svg'); position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }增强体验：
- 添加过渡动画
- 使用
:focus状态强化反馈 - 配合
:placeholder-shown优化空状态
5. 伪元素的伪元素：嵌套内容技巧
虽然技术上伪元素不能再有伪元素，但通过巧妙组合可以实现类似效果。
5.1 多层Tooltip
.tooltip::after { content: attr(data-tooltip); /* 基础样式 */ } .tooltip:hover::after { animation: fadeIn 0.3s forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }进阶技巧：
- 使用
>.progress::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: var(--progress, 0%); background: linear-gradient(to right, #4cd964, #5ac8fa); } .progress::after { content: var(--progress); position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: white; font-size: 12px; mix-blend-mode: difference; }交互实现：
- 使用JavaScript更新
--progress变量 - 添加
transition实现平滑变化 - 考虑使用
<progress>元素增强语义
伪元素性能优化与最佳实践
虽然伪元素非常强大，但也需要注意使用方式：
可访问性考虑：
- 伪元素内容不会被屏幕阅读器读取
- 关键信息必须存在于真实DOM中
- 使用
aria-label补充说明
性能优化：
- 避免在伪元素中使用大图
- 减少复杂动画的使用
- 使用
will-change提示浏览器优化
维护建议：
- 添加注释说明伪元素的用途
- 保持命名一致性（如
.btn--icon） - 考虑使用Sass/Less管理复杂样式
/* 伪元素样式表规范示例 */ .element { position: relative; /* 基础样式 */ } .element::before { /* [图标] 用于表示状态指示 */ content: ""; position: absolute; /* 定位样式 */ } .element::after { /* [装饰] 用于视觉增强效果 */ content: ""; /* 样式定义 */ }通过合理运用
::before和::after伪元素，我们可以在不增加HTML复杂度的前提下，实现各种精致的界面效果。记住，伪元素最适合用于装饰性内容，而非关键功能内容。 - 使用JavaScript更新