::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 结构的情况下，灵活地添加装饰性内容和其他元素。
