::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;
}
这种方式避免引入额外图标文件，轻量且可缩放。
Yes!Sun基于PHP+MYSQL技术，体积小巧、应用灵活、功能强大，是一款为企业网站量身打造的WEB系统。其创新的设计理念，为企业网的开发设计及使用带来了全新的体验：支持前沿技术：动态缓存、伪静态、静态生成、友好URL、SEO设置等提升网站性能、用户体验、搜索引擎友好度的技术均为Yes!Sun所支持。易于二次开发：采用独创的平台化理念，按需定制项目中的各种元素，如：产品属性、产品相册、新闻列表
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 为空字符串导致不显示。
