伪元素::before :: after的用法？

::before 和 ::after 是 CSS 伪元素，用于在元素内容的前面或后面插入内容。这些伪元素不会改变文档的实际内容，但可以用来添加装饰性元素或文本。以下是它们的用法和一些常见示例。

基本用法
::before
::before 伪元素用于在元素的内容之前插入内容。

.element::before {
    content: "Before content";
    color: red;
}

::after
::after 伪元素用于在元素的内容之后插入内容。

.element::after {
    content: "After content";
    color: blue;
}

示例
示例 1：插入文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .example::before {
            content: "Before: ";
            color: red;
        }

        .example::after {
            content: " :After";
            color: blue;
        }
    </style>
</head>
<body>
    <div class="example">Main content</div>
</body>
</html>

在这个示例中，.example 元素的内容将显示为 “Before: Main content
”。

示例 2：插入图标
你还可以使用伪元素插入图标或其他装饰性内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .icon::before {
            content: url('icon.png');
            display: inline-block;
            margin-right: 5px;
        }

        .icon::after {
            content: url('icon.png');
            display: inline-block;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div class="icon">Text with icons</div>
</body>
</html>

在这个示例中，.icon 元素的内容将会在文本前后显示图标 icon.png。

示例 3：清除浮动
::after 伪元素常用于清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        .float-left {
            float: left;
            width: 50%;
        }

        .float-right {
            float: right;
            width: 50%;
        }
    </style>
</head>
<body>
    <div class="clearfix">
        <div class="float-left">Left</div>
        <div class="float-right">Right</div>
    </div>
</body>
</html>

在这个示例中，.clearfix 类使用 ::after 伪元素来清除其子元素的浮动。

注意事项
content 属性：伪元素的 content 属性是必需的。如果没有指定 content 属性，伪元素将不会显示。
层叠顺序：伪元素会被认为是元素内容的一部分，因此它们会覆盖元素的背景，但不会覆盖元素的边框。
兼容性：现代浏览器都支持 ::before 和 ::after 伪元素。
通过使用 ::before 和 ::after，你可以在不改变 HTML 结构的情况下，灵活地添加装饰性内容和其他元素。

金木讲编程

伪元素::before :: after的用法？