CSS伪元素before和after使用详解

CSS中的::before和::after伪元素是无需改动HTML即可动态插入装饰性内容或视觉效果的强大工具，但其核心前提是必须声明content属性（哪怕为空字符串），否则不会渲染；它们默认为内联元素，常需结合position定位（如父元素relative + 伪元素absolute）实现精准布局，并支持文本、Unicode符号、属性值引用等多种content形式；虽能继承父样式且灵活组合各类选择器，但因不属于DOM节点而无法被JavaScript直接操作，使用时还需兼顾渲染性能与可访问性——关键信息应避免仅依赖伪元素呈现，确保对屏幕阅读器友好。

CSS 选择器可以通过为元素添加 ::before 和 ::after 伪元素，在不修改 HTML 的情况下插入内容或装饰性元素。这两个伪类不会影响文档流中的结构，但会在渲染层面对元素进行扩展。

基本语法与 content 属性

要使 ::before 和 ::after 生效，必须设置 content 属性，即使为空字符串也需声明。否则伪元素不会被渲染。

.element::before {
  content: "";            /* 必须存在 */
  display: block;
  width: 10px;
  height: 10px;
  background: red;
}

content 可以是：

• 纯文本（如 "添加文字"）
• 空字符串（用于装饰图形）
• 引用属性值（如 attr(data-tip)）
• Unicode 字符（如 "\2713" 表示对勾）
• 计数器（结合 counter-increment 使用）

定位与布局控制

伪元素默认是行内元素，常配合 position 使用来实现图标、箭头、装饰线等视觉效果。

常见做法是将目标元素设为 relative，伪元素设为 absolute。

.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

结合其他选择器增强灵活性

你可以将伪类与其他选择器组合使用，比如类名、属性选择器、状态伪类等。

• .btn:hover::after：鼠标悬停时显示提示
• input:focus::before：聚焦输入框前加图标
• [data-status="ok"]::after：根据属性值添加标记

注意：由于伪元素不属于 DOM 节点，不能通过 JavaScript 直接操作，但可通过切换类名间接控制其显示。

性能与可访问性建议

虽然 ::before 和 ::after 很方便，但也需注意：

• 避免滥用，过多伪元素可能影响渲染性能
• 插入的文本若为重要信息，应确保可被屏幕阅读器识别（有时需用 aria-label 替代）
• 不要用伪元素承载关键交互功能

基本上就这些。只要记得写 content，合理使用定位和样式，::before 和 ::after 就能安全有效地扩展元素表现力。

今天关于《CSS伪元素before和after使用详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！