在CSS中，::before和::after伪元素是非常实用的工具，它们允许我们在不修改HTML结构的前提下，通过CSS向元素前后插入内容。虽然看起来只是加点小装饰，但在实际开发中用途很广。
这是::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属性是必须的，否则伪元素不会生效。
以上就是CSS中伪元素::before和::after的常见用法的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
276
收藏
