CSS 伪元素 ::before/::after 进阶：结合 attr() 与 counter() 实现 3 种动态内容

CSS 伪元素 ::before/::after 进阶结合 attr() 与 counter() 实现 3 种动态内容前端开发中伪元素::before和::after是强大的工具它们允许我们在不修改 HTML 结构的情况下通过 CSS 为页面元素添加额外的装饰性或功能性内容。本文将深入探讨如何结合attr()和counter()这两个高级函数实现三种实用的动态内容生成方案。1. 伪元素基础与核心概念在开始之前让我们快速回顾一下伪元素的基础知识。伪元素::before和::after会分别在目标元素的内容前后创建一个虚拟的子元素这些元素不会出现在 DOM 中但会像真实元素一样参与页面渲染。伪元素的核心特性必须设置content属性才会显示默认是行内元素 (display: inline)继承父元素的文本样式无法通过 JavaScript 直接操作/* 基本用法示例 */ .element::before { content: 前缀; color: red; } .element::after { content: 后缀; font-weight: bold; }content 属性的多种取值值类型示例说明字符串content: 文本直接显示指定文本属性值content: attr(data-tip)显示元素的 data 属性值计数器content: counter(num)显示自动生成的计数器值图片content: url(icon.png)插入图片无法调整尺寸空值content: 创建无内容的伪元素用于样式2. 动态提示文本结合 attr() 函数attr()函数允许我们将 HTML 元素的属性值提取到 CSS 中这在创建动态提示文本时特别有用。2.1 基础数据绑定button>button { position: relative; } button::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 5px 10px; border-radius: 4px; opacity: 0; transition: opacity 0.3s; } button:hover::after { opacity: 1; }2.2 增强版数据提示我们可以通过组合多个属性值创建更复杂的提示div classproduct >.product::before { content: attr(data-name) - attr(data-price) ( attr(data-stock) ); display: block; background: #f5f5f5; padding: 8px; margin-bottom: 10px; }2.3 图片加载失败处理attr()特别适合处理图片加载失败的情况img { position: relative; } img::before { content: 图片加载失败: attr(alt); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f1f1f1; display: flex; align-items: center; justify-content: center; color: #666; } img::after { content: ; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px dashed #ccc; }3. 自动编号系统counter() 函数应用counter()函数结合counter-reset和counter-increment属性可以创建复杂的自动编号系统而无需使用有序列表。3.1 基础章节编号article h2引言/h2 h2方法/h2 h2结果/h2 /articlearticle { counter-reset: section; } h2::before { counter-increment: section; content: 第 counter(section) 章: ; color: #3498db; }3.2 多级嵌套编号body { counter-reset: chapter; } h1 { counter-reset: section; counter-increment: chapter; } h1::before { content: counter(chapter) . ; } h2 { counter-reset: subsection; counter-increment: section; } h2::before { content: counter(chapter) . counter(section) ; } h3 { counter-increment: subsection; } h3::before { content: counter(chapter) . counter(section) . counter(subsection) ; }3.3 任务步骤计数器div classtask div classstep准备材料/div div classstep混合搅拌/div div classstep烘烤/div /div.task { counter-reset: step-counter; } .step::before { counter-increment: step-counter; content: 步骤 counter(step-counter) : ; font-weight: bold; color: #e74c3c; } .step { margin-bottom: 10px; padding-left: 20px; position: relative; } .step::after { content: ; position: absolute; left: 0; top: 0; width: 16px; height: 16px; background: #3498db; border-radius: 50%; }4. 高级应用attr() 与 counter() 的组合将attr()和counter()结合使用可以创建更强大的动态内容解决方案。4.1 带编号的自定义列表ul classcustom-list li>.custom-list { counter-reset: list-item; list-style: none; padding: 0; } .custom-list li { counter-increment: list-item; position: relative; padding-left: 40px; margin-bottom: 15px; } .custom-list li::before { content: counter(list-item); position: absolute; left: 0; top: 0; width: 30px; height: 30px; background: #3498db; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; } .custom-list li::after { content: attr(data-title); display: block; font-weight: bold; margin-top: 5px; color: #2c3e50; }4.2 进度指示器div classprogress-tracker div classstep>.progress-tracker { display: flex; counter-reset: step; position: relative; } .progress-tracker::before { content: ; position: absolute; top: 15px; left: 0; right: 0; height: 2px; background: #ddd; z-index: 1; } .step { counter-increment: step; position: relative; flex: 1; text-align: center; z-index: 2; } .step::before { content: counter(step); width: 30px; height: 30px; line-height: 30px; display: block; margin: 0 auto 5px; border-radius: 50%; background: #ddd; color: #fff; } .step::after { content: attr(data-step); display: block; color: #999; } .step[data-statuscomplete]::before { background: #2ecc71; } .step[data-statuscurrent]::before { background: #3498db; } .step[data-statuspending]::before { background: #ddd; }4.3 交互式评分组件div classrating>.rating { display: inline-flex; font-size: 24px; } .rating span { position: relative; cursor: pointer; } .rating span::before { content: ☆; color: #ddd; } .rating span:hover::before, .rating span:hover ~ span::before { content: ★; color: gold; } .rating[data-value] span[data-value]::before, .rating[data-value] span[data-value] ~ span::before { content: ★; color: gold; } .rating::after { content: attr(data-value) / attr(data-max); margin-left: 10px; font-size: 16px; line-height: 24px; color: #666; }5. 性能优化与最佳实践虽然伪元素非常强大但在使用时也需要注意一些最佳实践性能考虑避免在频繁重绘的元素上使用复杂伪元素伪元素动画尽量使用transform和opacity属性减少伪元素中的高代价 CSS 属性如box-shadow可访问性建议不要将关键内容放在伪元素中屏幕阅读器可能无法识别为伪元素内容提供替代文本通过 ARIA 属性确保伪元素内容有足够的颜色对比度调试技巧/* 快速查看伪元素边界 */ .debug::before, .debug::after { outline: 1px dashed rgba(255,0,0,0.5); }浏览器兼容性处理/* 旧版浏览器兼容 */ .old-browser::before { content: ; /* 注意空格 */ display: block; }