CSS如何给元素添加装饰性内容_通过before伪元素插入css

::before伪元素必须设置content属性才能渲染，否则即使设置样式也不显示；默认为inline且无宽高，需设display为block等才生效；其内容不可被js选中，屏幕阅读器默认忽略，z-index在伪元素间无效。

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 没调对。伪元素看着轻巧，但每一层渲染逻辑都卡得死死的。