CSS伪元素before和after使用技巧解析
2026-01-25 21:27:42
0浏览
收藏
从现在开始，努力学习吧！本文《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也不自动继承，常被忽略导致文字“消失”（其实是黑色字打在黑色背景上） - 在表单控件（如
、