概述
:before 选择器是一个 CSS 伪元素，它允许您在元素内容之前插入内容。它是一种强大的工具，可用于添加图标、装饰元素或增强元素的样式。
语法
:before 选择器的语法如下：
--------------- - -- ---- -- -
其中：
selector是您要应用伪元素的元素。{}中包含伪元素的样式属性。
用法
:before 选择器可用于各种目的，包括：
- 添加图标：使用
content属性插入图标代码或图像 URL。 - 创建装饰元素：使用
border、background或box-shadow属性创建装饰线、形状或阴影。 - 增强元素样式：使用
color、font-size或text-align属性修改元素内容的样式。
示例
添加图标
-------- - -------- -------- ------------ ----- ------- - ------ ------------ ---- ------------- ---- -
这将为 <p> 元素添加一个 Font Awesome 图标（垃圾桶）。
创建装饰线
--------- - -------- --- -------- ------ ------ ----- ------- ---- ----------------- ----- -------------- ----- -
这将在 <h2> 元素下方创建一条水平线。
增强元素样式
-------- - -------- ------- ------ ----- ----------------- ----- -------- ---- -------------- ---- ------------- ---- -
这将为 <a> 元素添加一个带有文本和样式的按钮。
注意
:before伪元素是内联元素，这意味着它不会创建新的块级元素。:before伪元素的内容不会出现在 HTML 代码中。:before伪元素可以与其他伪元素（如:after）一起使用。
浏览器支持
:before 选择器在所有现代浏览器中都得到广泛支持。
结论
:before 选择器是一个功能强大的工具，可用于增强您的网站的样式和交互性。通过了解它的语法和用法，您可以创建引人注目的效果并改善用户体验。