跳到主要内容

CSS ::before 伪元素

介绍​

CSS 中的 ::before 伪元素用于在选定元素的内容之前插入内容。它是一个非常有用的工具，可以在不修改 HTML 结构的情况下，通过 CSS 添加额外的装饰性内容或功能性内容。::before 伪元素通常与 content 属性一起使用，以定义插入的内容。

备注

::before 是 CSS3 中引入的语法，而 :before 是 CSS2 中的旧语法。为了保持一致性，建议使用 ::before。

基本语法​

::before 伪元素的基本语法如下：

css
selector::before {
  content: "插入的内容";
  /* 其他样式属性 */
}
  • selector：你想要应用伪元素的 HTML 元素。
  • content：定义插入的内容，可以是文本、图标或其他内容。

示例 1：插入文本内容​

假设我们有一个段落元素，我们想在段落内容前插入一个前缀文本：

html
<p class="intro">这是一个段落。</p>
css
.intro::before {
  content: "注意：";
  color: red;
  font-weight: bold;
}

输出结果：

注意：这是一个段落。

在这个例子中，::before 伪元素在段落内容前插入了红色的“注意：”文本。

插入图标或符号​

::before 伪元素不仅可以插入文本，还可以插入图标或符号。例如，我们可以使用 Unicode 字符或 Font Awesome 图标库来插入图标。

示例 2：插入 Unicode 符号​

html
<p class="tip">这是一个提示。</p>
css
.tip::before {
  content: "⚠️"; /* Unicode 警告符号 */
  margin-right: 5px;
}

输出结果：

⚠️ 这是一个提示。

示例 3：插入 Font Awesome 图标​

html
<p class="info">这是一条信息。</p>
css
.info::before {
  content: "\f05a"; /* Font Awesome 信息图标的 Unicode */
  font-family: "Font Awesome 5 Free";
  margin-right: 5px;
}

输出结果：

ℹ️ 这是一条信息。
提示

确保在使用 Font Awesome 图标时，正确加载了 Font Awesome 字体文件。

实际应用场景​

1. 装饰性内容​

::before 伪元素常用于添加装饰性内容，例如在列表项前添加自定义符号或图标。

html
<ul>
  <li class="custom-bullet">列表项 1</li>
  <li class="custom-bullet">列表项 2</li>
</ul>
css
.custom-bullet::before {
  content: "•";
  color: blue;
  margin-right: 10px;
}

输出结果：

• 列表项 1
• 列表项 2

2. 清除浮动​

::before 伪元素也可以用于清除浮动，尤其是在使用浮动布局时。

html
<div class="clearfix">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
</div>
css
.clearfix::before {
  content: "";
  display: table;
  clear: both;
}

输出结果：

左浮动元素 右浮动元素

3. 动态内容生成​

::before 伪元素可以与 CSS 变量结合使用，动态生成内容。

html
<p class="dynamic-content">动态内容</p>
css
:root {
  --dynamic-text: "动态前缀";
}

.dynamic-content::before {
  content: var(--dynamic-text);
  color: green;
}

输出结果：

动态前缀 动态内容

总结​

::before 伪元素是 CSS 中一个强大的工具，允许开发者在元素内容前插入额外的内容，而无需修改 HTML 结构。通过 content 属性，你可以插入文本、图标、符号等内容，并且可以结合其他 CSS 属性实现丰富的样式效果。

附加资源与练习​

  • 练习 1：尝试使用 ::before 伪元素为一个按钮添加一个图标前缀。
  • 练习 2：使用 ::before 伪元素为一个表格的每一行添加一个自定义的序号。
  • 进一步阅读：查阅 MDN Web Docs 了解更多关于 ::before 伪元素的详细信息。

通过不断练习和探索，你将能够熟练掌握 ::before 伪元素的使用，并在实际项目中灵活应用。