:before伪元素需配合content使用，用于在元素内容前插入装饰性内容。例如可添加星号、引号或小方块：element:before { content: "★"; } 或设置样式块。常用于引用标记、自定义项目符号及状态提示。生成内容为行内元素，需设display:block以支持宽高，且不可被选中，适合非语义装饰。可与:after结合使用，但避免滥用影响可访问性。
在CSS中，:before 伪元素选择器允许你在选定元素的**内容之前**插入生成的内容。它常用于添加装饰性文本、图标或样式元素，而无需修改HTML结构。这个功能不仅简洁，还能提升页面的可维护性。
基本语法与使用方式
:before 必须配合 content 属性使用，否则不会生效。content 可以是字符串、计数器、属性值，甚至是空内容用于纯样式装饰。
常见写法示例：-
element:before { content: "★"; }—— 在元素前加一个星号 -
element:before { content: ""; display: block; width: 10px; height: 10px; background: red; }—— 插入一个红色小方块作为装饰
实际应用场景
利用 :before 可实现多种视觉增强效果，以下是一些实用场景：
-
引号装饰：在引用文字前加入左引号，如
blockquote:before { content: "“"; font-size: 2em; color: #999; } - 项目符号替换：为列表项自定义前置图标，比如用小箭头或圆点
- 状态标记：在警告或提示类元素前插入感叹号或标签
注意事项与技巧
使用 :before 时需注意其行为特性，避免布局问题。
立即学习“前端免费学习笔记（深入）”；
- 生成的内容默认是行内元素，若需宽高或定位，建议设置
display: block或结合position - 不能选中或复制伪元素中的内容，适合用于非语义性装饰
- 可配合 :after 使用，实现更复杂的前后装饰组合
- 尽量避免插入大量文本内容，影响可访问性和SEO
基本上就这些。合理使用 :before 能让页面更美观且结构更干净。不复杂但容易忽略细节，尤其是 content 和 display 的配合。
