::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%; }
关键点：
立即学习“前端免费学习笔记（深入）”；
常见装饰用法示例
以下是一些实用且美观的装饰技巧。
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能让页面细节更精致，关键是控制好尺寸、颜色和位置，让装饰服务于整体设计。不复杂但容易忽略。