跳到主要内容

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 伪元素的使用,并在实际项目中灵活应用。