::before伪元素通过content属性为元素添加装饰性内容，常用于插入图标、引号等视觉效果。结合position、transform、border等属性可实现圆点标记、引用符号、边框角等精致装饰，提升页面细节表现力。
使用CSS伪元素::before可以为元素添加装饰性内容或视觉效果，而无需修改HTML结构。它常用于添加图标、形状、引号、分隔符等装饰元素。
基本语法与常用属性
::before伪元素通过content属性插入内容，即使为空字符串也能创建可样式化的视觉元素。结合其他CSS属性，能实现丰富的装饰效果。
基础写法：
.element::before {
content: ""; /* 必须定义content */
position: absolute;
width: 10px;
height: 10px;
background: #ff6b6b;
left: 0;
top: 50%;
}
关键点：
立即学习“前端免费学习笔记（深入）”；
-
content 是必需的：即使不显示文字，也要设置
content: ""; -
默认是行内元素：可通过
display改为块级或绝对定位 -
脱离文档流：常配合
position: absolute精确定位
常见装饰用法示例
以下是一些实用且美观的装饰技巧。
1. 添加小圆点作为项目标记
.list-item::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background: #007acc;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
2. 插入引用符号
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
font-family: Georgia, serif;
position: absolute;
left: 10px;
top: 10px;
}
3. 创建边框装饰角
用两个伪元素组合做出装饰边框角：
.box::before {
content: "";
position: absolute;
width: 15px;
height: 15px;
border-top: 3px solid #ff6b6b;
border-left: 3px solid #ff6b6b;
top: 0;
left: 0;
}
提升视觉表现的小技巧
让装饰更自然、更有设计感。
-
用 transform 定位：比如
transform: translateY(-50%);居中对齐更灵活 -
透明度与阴影：
opacity和box-shadow增加层次感 -
动画效果：配合
transition或@keyframes实现hover动效 -
避免干扰布局：尽量用
position: absolute防止影响原有排版
基本上就这些。合理使用::before能让页面细节更精致，关键是控制好尺寸、颜色和位置，让装饰服务于整体设计。不复杂但容易忽略。
