CSS中伪元素::before和::after的常见用法

在css中，::before和::after伪元素是非常实用的工具，它们允许我们在不修改html结构的前提下，通过CSS向元素前后插入内容。虽然看起来只是加点小装饰，但在实际开发中用途很广。

清除浮动（Clearfix）

这是::after一个非常经典的用法。当内部元素都浮动了，父容器可能会“塌陷”，高度为0。这时候可以用::after伪元素来清除浮动，保证布局稳定。

.clearfix::after {   content: "";   display: block;   clear: both; }

使用时只要给父容器加上这个类名，就能解决高度塌陷的问题。这种做法比额外添加空标签更干净，也更容易维护。

添加装饰性内容或图标

有时候我们想在文字前或后加一些小图标、引号、箭头之类的装饰性内容，直接写进HTML不太优雅，用::before或::after就很合适。

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

比如给链接加个外部链接的小图标：

a.external::after {   content: " ➚";   font-size: 0.8em;   color: gray; }

或者给引用段落加上引号：

blockquote::before {   content: "“"; } blockquote::after {   content: "”"; }

这样不仅保持HTML干净，还能方便地通过CSS控制样式和显示逻辑。

创建简单的形状或装饰线条

除了插入文本内容，还可以结合CSS绘制一些小图形或分隔线。例如，制作一个水平虚线分隔符：

.divider::after {   content: "";   display: block;   height: 1px;   background: repeating-linear-gradient(     to right,     black,     black 2px,     transparent 2px,     transparent 6px   );   margin: 20px 0; }

或者做一个中间带圆点的横线分割栏，用在文章章节之间、按钮组之间等地方都很合适。

样式增强与状态提示

有些时候我们需要根据元素的状态做一些视觉上的变化，比如在必填项后面加个红色星号，或者在新窗口打开的链接上加提示。

例如：

.required::after {   content: "*";   color: red;   margin-left: 4px; }

或者针对某些特定类型的链接：

a[target="_blank"]::after {   content: " (新窗口)";   font-size: 0.9em;   color: #666; }

这些小细节提升了用户体验，而且完全不需要改动HTML结构。

基本上就这些常见用法。虽然伪元素功能有限，但用好了能大大提升页面的表现力和代码的整洁度。关键是要理解content属性是必须的，否则伪元素不会生效。