如何使用CSS beforeafter伪元素和absolute布局实现装饰线条定位？

本文共计990个文字，预计阅读时间需要4分钟。

不写content，:before和:after根本不会渲染——这是最常被忽视的前提。浏览器会直接忽略这些伪元素，除非它们被正确使用。哪怕你写上了position: absolute、width、background等样式，如果没有适当的定位或内容，它们都不会显示。浏览器会直接忽略这些样式，因为你没有提供一个基本的触发渲染的元素。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• content: "" 是最常用写法，空字符串即可触发渲染
• 如果需要文字装饰（比如箭头、图标符号），可用 content: "→" 或 content: "•"
• 避免写 content: none 或漏掉该声明——这会导致伪元素“消失”，不是隐藏，是彻底不生成

定位伪元素必须设position: relative在父容器上

伪元素本身设position: absolute后，它的定位参考系是最近的「已定位祖先」。如果父容器没设position（即默认static），那参考系会一路往上找到body，线条就飘到页面角落去了。