::before伪元素配合content属性可在元素内容前插入装饰性内容。1. 用于添加图标、引号等视觉元素，如.quote::before插入左引号；2. content支持文本、Unicode符号、计数器和图片，如url(arrow-right.svg)插入箭头；3. 实现标题分隔线、悬停提示、自定义列表符号及伪边框等效果；4. 默认为inline，需设display:block以支持宽高定位；5. 提升样式灵活性且保持html简洁，但应避免影响可访问性与seo。
在css中，::before 伪元素配合 content 属性，是一种常用的装饰手段，可以在目标元素的内容前插入额外的视觉内容，而无需修改HTML结构。这种技术常用于添加图标、引号、装饰性符号或样式增强。
::before 的基本用法
::before 会创建一个虚拟子元素，位于所选元素实际内容的最前面。它必须与 content 属性一起使用，否则不会显示。
示例：
.quote::before { content: "" ""; color: #999; font-size: 1.5em; }
这样会在类名为 quote 的元素前插入一个左引号，实现文字前的装饰效果。
content 属性能做什么
content 不仅能插入文本，还能引入其他视觉内容：
立即学习“前端免费学习笔记（深入）”；
- 纯文本：如 “第” 或 “→”
- 特殊符号：用Unicode表示，如 “2022”（圆点）或 “2713”（对勾）
- 计数器：结合 counter-increment 实现自动编号
- 图片：通过 url() 插入小图标
例子：添加小箭头图标
.link::before { content: url(arrow-right.svg); margin-right: 8px; }
实用装饰技巧
利用 ::before 可以实现多种轻量级视觉增强：
- 为标题添加装饰线或点：用 content 插入 “|” 或 “•”，配合颜色和间距美化布局
- 制作悬浮提示：鼠标悬停时，::before 显示提示文字或图标
- 自定义列表项目符号：替代默认的 ul/bullet 样式
- 伪边框或阴影层：通过绝对定位模拟多层边框效果
注意： ::before 默认是 inline 元素，若需设置宽高或定位，记得加上 display: block 或其它布局属性。
基本上就这些。合理使用 ::before 和 content，能让页面细节更精致，又保持HTML简洁。关键是别滥用，避免生成的内容影响可访问性或SEO。不复杂但容易忽略。