CSS伪元素before装饰技巧分享

CSS伪元素::before看似简单，实则暗藏诸多易被忽视的关键规则：它必须通过content属性（哪怕是空字符串）才能触发渲染，否则所有样式设置都形同虚设；默认inline特性使其不支持宽高，需显式设置display为block或inline-block等才能布局；其内容不属于DOM、不可被JS选中、屏幕阅读器默认忽略，且与::after之间z-index无效、层叠顺序固定。掌握这些底层逻辑——从content必填、display适配、无障碍考量，到层级限制与调试陷阱——才是真正用好::before实现精致装饰效果的核心所在。

before伪元素必须有content属性才能显示

不写 content，::before 就是隐形的——哪怕加了颜色、尺寸、定位，浏览器也完全不渲染。这是最常被卡住的第一步。

• content: "" 是最常用的占位写法，空字符串也能触发渲染
• 如果想插文字，直接写 content: "提示"；插引号用 content: open-quote 或 content: "»"
• content: none 和没写 content 效果不同：前者是显式隐藏，后者是根本不算伪元素
• 图片要用 content: url(./icon.svg)，路径错误不会报错，但图标不出现——建议先在 img 标签里单独测通路径

before伪元素默认是inline，布局受限

它天生没有宽高，设 width/height 无效，除非先改成 display: block 或 inline-block。

• 要居中一个装饰性圆点？得写 display: inline-block; width: 8px; height: 8px; border-radius: 50%
• 想让它撑满父容器？position: absolute 更可靠，但记得父元素加 position: relative
• 用 flex 布局时，::before 默认不参与排列，需显式设 display: flex 才能当子项用

before插入的内容无法被JS选中或聚焦

它不属于 DOM 树，document.querySelector(".box::before") 会报错，getComputedStyle 是唯一读取方式。

• 需要响应点击？只能给宿主元素绑定事件，再靠 event.target 判断位置，或用 pointer-events: none 让点击穿透到下层
• 屏幕阅读器默认忽略 ::before 内容，无障碍场景下别放关键信息
• 打印样式表里，::before 默认会输出，如不需要得加 @media print { .box::before { content: none } }

多个伪元素叠加时z-index不生效

::before 和 ::after 天然位于元素内容的前后层，但它们之间不能靠 z-index 控制谁在上——顺序固定：::before 在最下，内容居中，::after 在最上。

• 想让装饰图标盖在文字上？只能把文字包进 span，再用 ::after 插图标，或反过来
• 用 transform: scale() 或 opacity 做动效更安全，z-index 在伪元素间基本是摆设
• 和真实子元素混排时，伪元素层级永远低于子元素，除非子元素自己设了负 z-index

实际用的时候，最麻烦的往往不是怎么写，而是改完发现没反应——八成是忘了 content，或者 display 没调对。伪元素看着轻巧，但每一层渲染逻辑都卡得死死的。

本篇关于《CSS伪元素before装饰技巧分享》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！