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