::before和::after伪元素通过content属性生成装饰性内容，可用于添加引号、图标、悬停动画及清除浮动，提升页面表现力与结构简洁性。
在CSS中，::before 和 ::after 伪元素是强大的工具，能帮助开发者在不增加HTML标签的前提下，为元素添加装饰性内容或视觉效果。它们通过CSS生成内容，常用于图标、提示、形状修饰等场景，合理使用可提升页面表现力又保持结构简洁。
1. 添加装饰性内容
利用 ::before 和 ::after 可以在元素前后插入文本或符号，比如引号、箭头、星号等，适合用于强调或美化内容。
例如给引用文字自动添加引号：
blockquote::before { content: "“"; font-size: 2em; color: #999;}blockquote::after { content: "”"; font-size: 2em; color: #999;}
这样无需在HTML中手动写引号，样式统一且易于维护。
立即学习“前端免费学习笔记（深入）”；
2. 创建几何图形和图标
通过设置宽高、边框和变换，可以用伪元素绘制三角形、圆形、心形等简单图形，常用于提示箭头或装饰角标。
常见用法：下拉按钮的小三角
.arrow-down::after { content: ""; display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid currentColor; margin-left: 5px; vertical-align: middle;}
这种方式避免引入额外图标文件，轻量且可缩放。
Pic Copilot
AI时代的顶级电商设计师，轻松打造爆款产品图片
158 查看详情
3. 实现悬浮提示与装饰效果
伪元素非常适合做悬停时的动态装饰，比如给链接添加下划线动画、按钮添加光晕等。
示例：鼠标悬停时从中间展开下划线
.link { position: relative; text-decoration: none;}.link::after { content: ""; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: #007acc; transition: all 0.3s ease;}.link:hover::after { width: 100%; left: 0;}
这种效果流畅自然，增强交互体验。
4. 清除浮动与布局辅助
虽然现代布局多用Flexbox或Grid，但在某些情况下，仍可用伪元素实现 clearfix，防止父容器塌陷。
传统clearfix写法：
.clearfix::after { content: ""; display: table; clear: both;}
将该类应用于包含浮动子元素的容器，即可闭合浮动，确保高度正确计算。
基本上就这些。掌握 ::before 和 ::after 的关键在于理解它们是**生成的内容**，必须配合 content 属性使用，且默认是行内元素。合理定位（relative + absolute）、控制层级（z-index）以及善用 transform，能让效果更精准。不复杂但容易忽略细节，比如忘记设置 position 或 content 为空字符串导致不显示。
以上就是css伪元素::before和::after应用技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1044680.html
微信扫一扫 
支付宝扫一扫 
