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