CSS伪元素before和after使用技巧解析

从现在开始，努力学习吧！本文《CSS 伪元素 before 和 after 用途详解》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

::before 和 ::after 仅用于在元素内容前后插入装饰性、非语义的生成内容，必须配合 content 属性（如 ""、"→"、url() 或 attr()）才能生效；适用于轻量装饰与视觉反馈，不可替代真实 DOM 节点。

伪元素 ::before 和 ::after 的核心用途

它们只用于在元素内容的**前侧或后侧插入生成内容**，且这个内容纯属装饰性、非语义性——不能被选中、无法聚焦、不参与可访问性树，也不影响 DOM 结构。

必须配合 content 属性才能生效

没有 content，::before 和 ::after 完全不会渲染。它的值可以是字符串、引号包裹的空格、url() 图片，或者 none/normal（此时不显示）。

• content: "" 是最常用写法，用于创建纯视觉层（比如三角形、边框装饰）
• content: "→" 可添加图标符号，但注意：它属于文本内容，会受字体、字号、行高影响
• content: url(arrow.svg) 支持内联 SVG，但不支持设置宽高，需靠 width/height 或 background + padding 控制尺寸
• content: attr(data-label) 能读取元素的 HTML 属性值，适合动态标注，但仅限字符串值

常见误用与限制

很多人试图用它们替代真实 DOM 节点，结果踩坑：

• 不能响应鼠标事件（pointer-events: auto 无效），如需点击交互，得套一层真实元素或改用 background
• 不继承父元素的 font-family，除非显式声明；color 也不自动继承，常被忽略导致文字“消失”（其实是黑色字打在黑色背景上）
• 在表单控件（如 <input>、<textarea>）上基本无效，因为这些元素是替换元素，浏览器限制其伪元素渲染
• IE8 只支持单冒号语法 :before，但现代项目通常不再考虑

.icon-btn::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(icon-check.svg) no-repeat center;
  background-size: contain;
  margin-right: 8px;
}

真正适合的场景就两类

一是轻量装饰（图标、分隔线、小三角），二是纯视觉反馈（如表单验证状态的红点、必填星号）。别让它承担结构责任，也别指望它能替代 JS 动态插入内容——该用真实元素的时候，就老老实实写 。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~