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>元素增强语义

  伪元素性能优化与最佳实践

  虽然伪元素非常强大，但也需要注意使用方式：

  1. 可访问性考虑：

     • 伪元素内容不会被屏幕阅读器读取
     • 关键信息必须存在于真实DOM中
     • 使用aria-label补充说明

  2. 性能优化：

     • 避免在伪元素中使用大图
     • 减少复杂动画的使用
     • 使用will-change提示浏览器优化

  3. 维护建议：

     • 添加注释说明伪元素的用途
     • 保持命名一致性（如.btn--icon）
     • 考虑使用Sass/Less管理复杂样式

  /* 伪元素样式表规范示例 */ .element { position: relative; /* 基础样式 */ } .element::before { /* [图标] 用于表示状态指示 */ content: ""; position: absolute; /* 定位样式 */ } .element::after { /* [装饰] 用于视觉增强效果 */ content: ""; /* 样式定义 */ }

  通过合理运用::before和::after伪元素，我们可以在不增加HTML复杂度的前提下，实现各种精致的界面效果。记住，伪元素最适合用于装饰性内容，而非关键功能内容。