css选择器中的伪元素_实现特殊效果的技巧

伪元素必须用双冒号语法且声明content属性才生效；默认为inline需设display，无DOM节点不响应事件，屏幕阅读器不可读。

伪元素名必须用双冒号，单冒号会触发兼容模式

现代 CSS 中，::before 和 :

:after 是标准写法；:before 和 :after 虽然仍被多数浏览器支持，但属于 CSS2 旧语法，仅用于向后兼容。如果在使用 content 插入图标或装饰时发现样式不生效，先检查是否误用了单冒号——尤其在搭配 display: flex 或 position: absolute 时，旧语法在某些构建工具（如旧版 PostCSS）中可能被错误剥离。

• Vue / Svelte 单文件组件里， 下伪元素必须写双冒号，否则可能被作用域处理逻辑忽略
• IE8 及更早版本只认单冒号，但已无实际维护价值，不建议为它降级写法
• ::first-line 和 ::first-letter 必须用双冒号，单冒号在所有浏览器中均无效

::before 和 ::after 必须声明 content 属性才渲染

这是最常踩的坑：::before 和 ::after 默认不显示，哪怕设置了 background-color 或 border，只要 content 为空或缺失，整个伪元素就等于不存在。空字符串 content: "" 是合法且常用的占位写法。

• 想插入 Unicode 图标？用 content: "\e901"（注意反斜杠转义，不是 "e901"）
• 插入 HTML 实体（如  ）无效，伪元素不解析 HTML，只能用转义字符或字符串
• content: attr(data-label) 可读取元素的 data 属性，但若属性不存在，结果为空字符串，伪元素仍不渲染

button::after {
  content: ""; /* 必须有这一行 */
  display: block;
  width: 0;
  height: 2px;
  background: #007bff;
  transition: width 0.3s;
}
button:hover::after {
width: 100%;
}

伪元素默认是 inline，布局受限需显式设 display

即使你给 ::before 设置了 width 和 height，它依然按 inline 元素排版：不能设宽高、不响应 margin-top/bottom、会受父元素 line-height 影响。常见表现是“明明写了 height: 20px 却没高度”。

• 要当块级容器用：加 display: block 或 display: flex
• 要做绝对定位装饰：加 position: absolute，同时确保父元素有 position: relative
• 要垂直居中图标：用 display: flex + align-items: center，比 vertical-align 可靠得多

伪元素无法绑定事件，也不在 DOM 树中

你无法对 ::before 添加 onclick，也不能用 JavaScript 通过 querySelector 选中它——它不是真实节点，只是渲染层的视觉补丁。所有交互逻辑必须绑定到宿主元素上，再通过类名或属性控制伪元素状态。

• 不要试图用 element.style.setProperty('--pseudo-bg', 'red') 动态改伪元素样式（CSS 变量可间接实现，但需提前在规则中引用）
• 动画过渡要写在伪元素自身规则里，例如 transition: transform 0.2s，不能靠 JS 操作 class 来触发（除非 class 控制的是 transform 等可继承属性）
• 可访问性（a11y）方面，伪元素中的文字不会被屏幕阅读器读出，重要信息必须放在真实文本节点中

伪元素真正难的不是语法，而是时刻记住它没有 DOM 身份、不参与事件流、不继承所有父级样式——很多“为什么没效果”的问题，根源都在这个前提被忽略了。