1. 伪元素不是装饰品Day4必须搞懂的底层概念我见过太多前端同行用着::before和::after跟背口诀似的——“哦这个能加个图标”“那个能画条线”可真问到这些伪元素到底在 DOM 的哪个位置、它们和真元素有什么本质区别能说清楚的不超过三成。标题叫“Day4 伪元素的使用”说明你大概率是在系统过一遍 CSS 核心知识那咱们就不光扫使用姿势先把这层窗户纸捅破。1.1 从“伪”字说起不是真的元素但能干真元素干的活伪元素pseudo-element这个“伪”字指的是它在文档树里并不真实存在。你可以把它理解成一个虚拟的、由 CSS 渲染引擎“脑补”出来的子元素。它不需要你在 HTML 里写div、i、span也不会占用 DOM 节点数但视觉上它确确实实出现在页面里并且能像普通元素一样被设置宽高、颜色、背景、定位、动画。用一个生活化类比你买了一个标准开源衣柜真元素就是衣柜里的衣服和隔板伪元素则是厂家在镜子里投出来的“虚拟层板”——你用起来跟真层板一模一样但它不占你房间的实际体积也不产生额外的物流成本。这就是为什么我们在做 UI 细节时常常优先考虑伪元素零额外 HTML 开销还能保持页面结构干净。在 CSS 2.1 时期伪元素用的是单冒号写法比如:before、:after、:first-line、:first-letter。CSS3 规范把它们统一改成了双冒号即::before、::after目的就是为了和伪类pseudo-class如:hover、:focus在语法上形成明确区分。所以写新代码时请优先用双冒号至于 IE8 这种只认单冒号的老古董后面会有专门的兼容性说明。1.2 伪类与伪元素的本质区别单冒号和双冒号的故事很多人记不住什么时候用单冒号、什么时候用双冒号其实只要抓住一点伪类描述的是“元素在某种状态下的样子”比如鼠标悬停、被选中、处于焦点而伪元素描述的是“元素内部额外生成的虚拟结构”它是文档树里本没有的东西。我常给新同事出的测试题是:first-child和::first-line哪个是伪类、哪个是伪元素答案是:first-child是伪类因为它是基于现有元素之间的“位置关系”下判断的而::first-line是伪元素因为它选择的是文本流中被浏览器自动排版出来的第一行这一行在源码里根本不存在。理解了这一点你就不会写出:first-line这种冒号错误也更清楚什么时候该用:hover、什么时候该用::selection。1.3 为什么能省标签DOM之外的“幽灵节点”伪元素出现在一个元素内部通常是“子级”的位置。比如div::before渲染出来的效果等同于在div所有真实子元素之前插入了一个虚拟节点div::after则相当于插在最后。这个虚拟节点默认是行内元素inline如果你要设置宽高、margin-top、margin-bottom、transform 等属性默认情况下没反应必须显式给它加display: block、inline-block、flex、grid等。我第一次用::before画一个 50x50 的方块时就没加display: block结果横竖看不出来折腾半天才发现是默认行内元素导致的。这个坑我在给不同团队做分享时至少讲过五十次但每次还是有人中招。记住这句话伪元素不是装饰品它是需要你用 display 唤醒的幽灵节点。2. content属性伪元素的心脏也是最容易踩坑的地方任何伪元素除了::first-line和::first-letter这类特殊的都必须配合content属性才能生效。content如果缺失伪元素会直接消失这不是“重置”问题而是规范就是这么定的。所以每次写完::before发现不显示第一步永远先检查有没有写content: 。2.1 content不写会怎样最常见的空白问题在项目实战里我见过大量这样的小白错误.icon::before { width: 20px; height: 20px; background: url(icon.png); }结果就是图标死活不出现。原因就是漏了content。你可以把content理解成给这个幽灵节点“挂牌”——牌子上写着要放什么内容哪怕牌子是空白的也得挂上去。所以最常见的正则表达式是content: 用来生成一个“空内容的伪元素”它本身不显示文字但依然拥有宽高和背景可以画形状、做遮罩、当装饰。顺便说一个技巧如果你希望伪元素的内容既不是文本也不是空串而是继承自某个属性的值可以写content: attr(data-name)。这里的>.triangle { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #333; }这就是一个向上的纯色三角形。先不要急着记代码理解一个事边框在相交处是斜线拼接的宽高为 0 时四条边框拼出来的其实是四个三角形。你只给某一边上色其他边透明就变成一个精准的三角形。更实用的场景是气泡尾巴。通常我会让气泡本身用::after画一个和小尾巴方向一致的白色三角形再用::before画一个略大一圈的深色三角形两个叠一起就能做出带边框的气泡尾巴.box { position: relative; } .box::before, .box::after { content: ; position: absolute; top: -20px; left: 30px; border: 10px solid transparent; border-bottom-color: #333; } .box::after { top: -18px; border-bottom-color: #fff; }这里::before是深色底::after是白色内部通过错位 2px 模拟描边效果。对比直接放一张带白边的三角形图片这段代码几乎零依赖改颜色也方便。3.2 清除浮动伪元素加clear的经典写法浮动清除是人人都用过的经典场景。原理是::after作为容器最后一个子元素用clear: both强制它挪到所有浮动元素的下方从而把容器高度撑起来。.clearfix::after { content: ; display: table; clear: both; }为什么用display: table因为clear: both对 block 元素也能生效但table可以避免外边距重叠问题这是包括 Bootstrap 在内的很多框架都在用的方案。不用单独在 HTML 里加div styleclear:both这个::after就是你的“隐形清洁工”。3.3 自定义复选框用::before重画勾选状态默认的 checkbox 在不同系统里样式差别很大于是我直接用appearance: none干掉原生外观然后用::before画勾。.custom-checkbox { position: relative; width: 20px; height: 20px; appearance: none; border: 2px solid #aaa; border-radius: 4px; } .custom-checkbox:checked::after { content: ; position: absolute; left: 5px; top: 1px; width: 6px; height: 12px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }这里把::after的尺寸控制在一个窄长条上用border-right和border-bottom拼出一个“L”形旋转 45 度就是一个打勾的样子。重点在于::after默认宽度高度不生效所以必须设置position: absolute或display: block。这是我反复强调的“唤醒”动作。3.4 分隔线与文字切开的效果很多文案标题喜欢在文字两侧加一条横线。如果用额外标签需要包两层 div太笨重。用伪元素直接搞.title { display: flex; align-items: center; gap: 12px; } .title::before, .title::after { content: ; flex: 1; height: 1px; background: #ddd; }这三段式结构特别适合“标题横线”场景。flex: 1让两侧的线自动伸缩文字永远居中。你甚至只需要.title::before一个伪元素也能做单侧装饰线。3.5 提示气泡的尾巴position定位的完整示例除了纯三角形我还常做带圆角的气泡卡片的尾巴。假设气泡的尾巴在左下角.bubble { position: relative; background: #fff; border-radius: 8px; border: 1px solid #e0e0e0; } .bubble::after { content: ; position: absolute; left: 20px; bottom: -8px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #fff; }这里三角形的上边框是白色正好从气泡底部“长出来”。背景色覆盖了边框线所以气泡底边框的线条在尾巴位置会断开视觉上干净利落。如果你想要尾巴有描边那就再叠加一个::before方法跟前面 3.1 的错位思路一样我就不重复写了。3.6 给 li 加序号伪元素配合计数器这招在写舆情报告、排行榜、面试题列表时很好用。不需要在 JS 里拼编号CSS 自己就能数ol { counter-reset: rank; } li { counter-increment: rank; } li::before { content: counter(rank) .; margin-right: 6px; font-weight: bold; color: #f60; }counter-reset在你希望清零的父元素上声明counter-increment则跟随li自增然后::before打印编号。这个方案比手写1. 2. 3.最大的优势是删掉中间任意一个 li其他编号自动重排不会出现跳号和断号。对于经常动态增删列表的项目来说省心不是一点半点。4. 伪元素与动画、计数器的高级组合Day4之后的扩展方向如果你已经把基本用法吃透了那接下来这个章节才是真正拉开差距的地方。伪元素最大的魅力在于它免费给你提供了两个“额外子元素”的额度。一个元素 两个伪元素相当于你能同时控制三层装饰很多复杂效果根本不需要改 HTML。4.1 用::before和::after同时做双层效果我做一个常见的“悬浮按钮发光”效果时只给一个a元素写样式.magic-btn { position: relative; padding: 10px 24px; background: #333; color: #fff; } .magic-btn::before, .magic-btn::after { content: ; position: absolute; inset: 0; border-radius: inherit; transition: transform 0.3s ease, opacity 0.3s ease; } .magic-btn::before { border: 2px solid #ff6a6a; transform: scale(1.1); opacity: 0; } .magic-btn:hover::before { transform: scale(1); opacity: 1; } .magic-btn::after { background: rgba(255, 106, 106, 0.3); transform: scale(0.8); opacity: 0; } .magic-btn:hover::after { transform: scale(1.1); opacity: 1; }这里::before负责描边扩散::after负责颜色晕开两层动画一叠加比单层更立体但 DOM 依然只有一个按钮。这种结构如果不用伪元素得很猥琐地套两个 span不仅代码变长还会拖累样式维护速度。4.2 计数器加伪元素自动编号还能这么玩除了给 li 编号计数器还可以嵌套。比如文档排版时自动给多层列表生成1.1、1.2、2.1这样的层级编号。用counter(rank, decimal)配合counters(rank, .)就能实现ol { counter-reset: rank; } ol li { counter-increment: rank; } ol li::before { content: counters(rank, .) ; } ol ol { counter-reset: subrank; }不过到这一层代码会稍显晦涩实际工作中我用它做了个自动编号的面试题库文档每个题目挂在二级目录下添加题目后编号自动变化省了我不少手工改编号的精力。4.3 与animation做复杂动效悬停、光效、波纹伪元素结合动画可以做出点击波纹效果这是移动端卡片常用的手法。原理很简单点击事件触发时动态给元素添加一个 class这个 class 让::after从一个小的圆开始放大并淡出。.ripple { position: relative; overflow: hidden; } .ripple::after { content: ; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transform: translate(-50%, -50%); opacity: 0; } .ripple:active::after { width: 100px; height: 100px; opacity: 1; transition: width 0.3s, height 0.3s, opacity 0.3s; }要点是给父级加overflow: hidden波圈永远被裁剪在卡片内部。用::after的好处是点击时只动这个虚拟元素不会影响其他真实子元素的布局。4.4 兼容性回顾双冒号的浏览器故事毕竟标题叫 Day4咱们顺着学习路径也得把兼容性这个问题摊开说。现代浏览器对::before、::after双冒号的支持是没问题的但 IE8 只认识:before、:after单冒号。如果你 2024 年还在做必须兼容 IE8 的活那我建议你直接把这段需求砍掉因为 IE8 已经属于上古生物还在用它的场景大概率是内部系统用单冒号促销可能更实际。如果你需要对老浏览器做渐进处理可以写两套选择器.selector:before { /* IE8 用 */ } .selector::before { /* 现代浏览器用 */ }但注意顺序先写旧写法再写新写法因为新写法也会被旧浏览器忽略而新浏览器会按优先级解析。另外伪元素对transition和animation的支持在现代浏览器里已经算稳定唯一要小心的是部分老版本 Safari 对伪元素上transform的 bug真遇到了就用translate替代rotate/scale组合或者升级浏览器内核。5. 避坑清单与实践经验把理论变成生产力的最后一公里理论再漂亮落地时坑也不少。我把这几年接项目和带新人时积累的伪元素相关坑点集中列一下有的我踩过有的是别人踩的但每一个都能避免你白耗半天。5.1 伪元素不是独立元素很多属性用不了伪元素虽然视觉上是子元素但它毕竟是从属元素很多属性不能直接作用于它比如position: fixed在某些场景下的包含块问题容易让人困惑。我记得有次做悬浮提示在::after上加position: fixed结果是基于最近的transform祖元素定位跟预期完全不符。后来改成把伪元素放在一个真实子元素包裹的容器里才把定位拉回正常。另外伪元素不能匹配:hover等状态除非通过设计结构调整选择器也不能让读屏软件读出content里的文本内容。所以如果你为了 SEO 或无障碍把关键文案写在content里基本等于白写。这也是我想提醒大家的一点。5.2 继承与层叠伪元素的盒模型细节默认伪元素是 inline很多同学会出现“长度设置无效”的问题。解决方法就是前面说的给伪元素加display: inline-block、block、flex等。这一点不新鲜但我要补充一个更隐蔽的问题伪元素的inherit继承的是其“归属元素”的属性而不是继承它视觉上所处位置的那个元素。你要做类似取消边框继承时要先确认归属元素是哪一个。还有一个小细节伪元素上的content是会参与布局的比如::after { content: 。 }在图后面偶尔会带来多余字符。这种内容用于视觉装饰没问题但别拿它承载关键文本。5.3 可访问性读屏软件如何看待伪元素这是很多前端容易忽略但在专业社区里讨论度很高的点。读屏软件对content内容的处理并不统一大部分主流读屏会忽略content: 生成的视觉内容所以你不能把表单的必填标记、验证提示、关键状态信息只放在伪元素里。比如你做一个无障碍很强的表单星号*表示必填项我会建议span里放文本再用::before画辅助的装饰线而不是直接用content: *去生成关键标记。如果迫不得已要用务必在真实 DOM 里写上对应的aria-label或alt说明。这个原则不仅是对读屏用户负责往往也是公司无障碍审查是否通过的关键。5.4 性能与语义什么时候该用伪元素什么时候该用真元素伪元素虽然方便但不是所有场景都该硬用它。比如复杂的图表、图标库、全局背景图该用 svg 的用 svg该用 img 的用 img。伪元素真正的应用场景通常是三类纯粹的视觉装饰分隔线、三角、角标、减少 DOM 冗余清除浮动、卡片角标、跟 CSS 状态联动hover、checked 等。我的经验是如果一个视觉元素本身有独立的信息含义比如产品图片、图表数据、内容文本就不要塞进伪元素如果它只是个修饰性辅助角色比如一个色块、一条线、一个圆点、一组对角线纹理那伪元素就是最合适的选择。这样既保证了语义正确也降低日后的维护成本。最后再说一个真心建议写任何伪元素样式之前先在本地起一个最小 HTML把content、display、position这三个属性一次调好再去写装饰代码。你会发现 90% 的“怎么不显示”类问题都被提前干掉了。伪元素就像做菜时的摆盘工具工具趁手不趁手根本区别就在思路和细节上。Day4 能把这个细节吃透后面做组件库、小游戏动效、纯 CSS 图标都会顺很多。