::before伪元素必须配合content属性才能生效，否则浏览器直接忽略；定位需父元素设position: relative；画三角形用透明border技巧；其内容不可被js选中或交互，也不参与seo和可访问性。
before伪元素必须配合content属性才能生效
不写content，::before完全不会渲染——这是最常被忽略的前提。浏览器会直接忽略整个伪元素声明，连盒模型都不生成。
-
content: ""是最常用写法，用于纯图形（比如加边框、背景、小图标），此时必须设display（如inline-block）才能设置宽高 -
content: "文字"可插入静态文本；content: attr(data-label)能读取元素的data-label属性值，适合动态标注 -
content: none或省略content，等同于禁用伪元素，别指望靠visibility: hidden或opacity: 0来“隐藏”它——它根本不存在
定位before图形时，父元素必须是相对定位上下文
想把::before当装饰块绝对定位（比如右上角小红点、左下角角标），父元素没设position: relative，它就会相对于最近的定位祖先或body偏移，结果飘到页面任意位置。
- 错误写法：
div::before { position: absolute; top: 0; right: 0; }，但div没定位 → 伪元素飞走 - 正确写法：给父元素加
position: relative（哪怕只是position: relative; z-index: 0这种最小代价声明） - 注意
z-index：伪元素默认和父元素同层叠上下文，若要盖在父内容上，需显式设z-index: 1；若要被内容遮挡，设z-index: -1并确保父元素有position
用before画三角形时，border技巧依赖透明边框+尺寸归零
纯CSS三角形本质是利用border交汇处的斜角，不是靠clip-path或transform模拟——后者兼容性差且难控制尺寸。
- 核心写法：
width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #333;→ 向下指的三角 - 方向由哪条
border设颜色决定：只设border-top→向上，border-right→向右，以此类推 - 常见翻车点：忘了清空
width/height，导致三角形叠加在方块上；或四边border都写了颜色，变成实心菱形 - IE8+支持该写法，比
clip-path: polygon()可靠得多
before内容无法被JavaScript选中或交互
::before和::after生成的内容属于CSS渲染层，DOM里不存在对应节点，所以document.querySelector找不到，click事件也捕获不到。
立即学习“前端免费学习笔记（深入）”；
- 需要点击响应？得把事件绑定在父元素上，再用
event.target === event.currentTarget判断是否点在伪元素区域（不精准），或改用真实子元素替代 - 想读取伪元素内容？
getComputedStyle(el, '::before').content能拿到字符串（含引号），但无法修改——它是只读计算值 - SEO和可访问性：伪元素内容不进入DOM树，屏幕阅读器通常忽略，重要信息别放这里
::before能当真实元素使——它没有事件、没有DOM位置、不参与语义结构，所有“让它干点活”的想法，都得先确认是不是真需要它。 
