在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控制样式和显示逻辑。
Revid AI
AI短视频生成平台
96 查看详情 
创建简单的形状或装饰线条
除了插入文本内容，还可以结合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的常见用法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1109408.html
微信扫一扫 
支付宝扫一扫 
