CSS 选择器 :before

概述

:before 是一个伪元素选择器，它允许你在选定的元素内容之前插入生成的内容。这个选择器通常与 content 属性一起使用，用于向页面添加额外的信息或装饰性内容。值得注意的是，:before 选择器插入的内容是不可编辑和不可选的。

使用场景

:before 选择器常用于创建图标、装饰线、或者在文本内容之前插入特定符号等。它非常适合用于需要向现有内容添加视觉提示或额外信息的情况。

基本语法

selector::before {
    content: "插入的内容";
    /* 其他样式属性 */
}

• selector：可以是任何有效的 CSS 选择器。
• content：必须设置的属性，用于定义插入内容的具体文本或图片等。

示例

假设我们想要在每个列表项前添加一个小圆点：

<ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

.list li::before {
    content: "\2022"; /* Unicode for bullet point */
    color: red;
    font-size: 18px;
    margin-right: 5px;
}

在这个例子中，每个列表项前面都会有一个红色的实心圆点。

注意事项

• content 属性不能留空，否则不会显示任何内容。
• ::before 和 :before 是相同的，但推荐使用双冒号 :: 来区分伪类和伪元素。
• 伪元素只能应用到能够包含内容的元素上。例如，<div>、<p>、<span> 等。

更多示例

示例1：为段落添加引号

<p>这是一个段落。</p>

p::before {
    content: "“";
}

p::after {
    content: "”";
}

这样处理后，每个段落的前后会分别出现左引号和右引号。

示例2：为链接添加图标

<a href="#">点击这里</a>

a::before {
    content: url('icon.png'); /* 图片路径 */
    vertical-align: middle;
    margin-right: 5px;
}

通过这种方式，可以在链接文字前插入一个自定义图标，并且通过调整 vertical-align 和 margin-right 来控制图标的对齐方式。

结构化内容

虽然 ::before 主要用于在元素内容前插入文本或图像，但它也可以用来创建复杂的布局结构。例如，通过组合使用多个伪元素，可以实现非常精细的视觉效果，而无需修改 HTML 结构。

通过上述详细说明和实例，我们可以看到 :before 选择器的强大功能及其在现代 Web 设计中的广泛应用。希望这些内容能帮助你更好地理解和应用这一 CSS 特性。