:before 和 :after 是 CSS 伪类选择器，它们在 HTML 中的元素之前或之后插入一些内容，这些内容不在 HTML 标签中存在。

CSS伪类 :before 和 :after 的用法实例详解

什么是伪类 :before 和 :after

:before 和 :after 是 CSS 伪类选择器，它们在 HTML 中的元素之前或之后插入一些内容，这些内容不在 HTML 标签中存在。

用法

使用 :before 或 :after 需要设置 content 属性。content 属性可以为文本、图片、引用等类型的值。

以下是一个示例：

p:before {
    content: "章节一：";
    font-weight: bold;
}

上面代码将为所有 <p> 元素的前面添加 "章节一："，并将文本加粗。

实例

实例 1：利用 :after 伪类生成一个图片

<!DOCTYPE html>
<html>
<head>
    <title>CSS伪类 :before 和 :after 的用法实例详解</title>
    <style>
        .icon {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #fd9e02;
            margin: 20px;
        }
        .icon:after {
            position: absolute;
            top: 2px;
            left: 2px;
            content: "";
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="icon"></div>
</body>
</html>

上面代码将在 .icon 类的元素后面添加一个白色圆形，其中使用了 position、content、width 和 height、border-radius 等属性来定义图片的位置和形状。通过使用 :after 伪类选择器，在 .icon 的后面添加了扩展的元素，并设置了必要的样式。

实例 2：利用 :before 生成列表前导符号

<!DOCTYPE html>
<html>
<head>
    <title>CSS伪类 :before 和 :after 的用法实例详解</title>
    <style>
        ul {
            list-style: none;
            margin-left: 0;
            padding-left: 0;
        }
        li:before {
            content: "• ";
            color: #fd9e02;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
</body>
</html>

上面代码将为所有列表项添加了一个 "•" 的符号，其中使用了 :before 伪类选择器，并设置 content 属性的值为 "• "。