概述

:before 选择器是一个 CSS 伪元素，它允许您在元素内容之前插入内容。它是一种强大的工具，可用于添加图标、装饰元素或增强元素的样式。

语法

:before 选择器的语法如下：

selector:before {
  /* 样式属性 */
}

其中：

• selector 是您要应用伪元素的元素。
• {} 中包含伪元素的样式属性。

用法

:before 选择器可用于各种目的，包括：

• **添加图标：**使用 content 属性插入图标代码或图像 URL。
• **创建装饰元素：**使用 border、background 或 box-shadow 属性创建装饰线、形状或阴影。
• **增强元素样式：**使用 color、font-size 或 text-align 属性修改元素内容的样式。

示例

添加图标

p:before {
  content: "\f015";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
}

这将为 <p> 元素添加一个 Font Awesome 图标（垃圾桶）。

创建装饰线

h2:before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-bottom: 10px;
}

这将在 <h2> 元素下方创建一条水平线。

增强元素样式

a:before {
  content: "阅读更多";
  color: #fff;
  background-color: #000;
  padding: 5px;
  border-radius: 5px;
  margin-right: 5px;
}

这将为 <a> 元素添加一个带有文本和样式的按钮。

注意

• :before 伪元素是内联元素，这意味着它不会创建新的块级元素。
• :before 伪元素的内容不会出现在 HTML 代码中。
• :before 伪元素可以与其他伪元素（如 :after）一起使用。

浏览器支持

:before 选择器在所有现代浏览器中都得到广泛支持。

结论

:before 选择器是一个功能强大的工具，可用于增强您的网站的样式和交互性。通过了解它的语法和用法，您可以创建引人注目的效果并改善用户体验。