9.1 伪元素 ::before 和 ::after
伪元素 ::before 和 ::after 是 CSS 中的强大工具，可以在不更改 HTML 的情况下在元素内容之前或之后添加装饰性元素。它们广泛用于创建视觉效果、提升用户界面并为元素添加样式。
描述：
::before: 在元素内容之前添加的伪元素::after: 在元素内容之后添加的伪元素
语法：
element::before {
/* before 伪元素的样式 */
}
element::after {
/* after 伪元素的样式 */
}
主要属性
伪元素 ::before 和 ::after 可以包含几乎任何 CSS 属性，包括颜色、大小、定位、背景、阴影等等。然而，为了让伪元素可见，必须设置内容和尺寸。
content: 设置伪元素的内容。可以是文本、图像或空字符串display: 设置伪元素的显示类型。通常使用block或inline-blockposition: 控制伪元素的位置（例如，absolute或relative）width和height: 设置伪元素的尺寸
9.2 添加文本
通过 content 属性可以轻松在任何元素的开头或结尾添加文本。
CSS
.example::before {
content: "开始: ";
color: blue;
}
.example::after {
content: " :结束";
color: red;
}
HTML
<body>
<p class="example">这是一个文本示例</p>
</body>
代码说明：
.example::before: 在元素的内容前添加文本 "开始: "，并将其着色为蓝色.example::after: 在元素的内容后添加文本 " :结束"，并将其着色为红色
9.3 装饰线条
也可以添加装饰线条来框住内容：
CSS
.decorative-line::before,
.decorative-line::after {
content: "";
display: block;
height: 2px;
background: black;
margin: 10px 0;
}
HTML
<body>
<div class="decorative-line">带装饰线的文本</div>
</body>
代码说明：
.decorative-line::before: 在元素内容前创建装饰线.decorative-line::after: 在元素内容后创建装饰线
9.4 插入图标
文字不够用？那可以轻松插入几个图标：
CSS
.icon::before {
content: url('https://via.placeholder.com/20');
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
HTML
<body>
<p class="icon">带图标的文本</p>
</body>
代码说明：
.icon::before: 使用图像 URL 在文本前添加图标
9.5 复杂装饰元素
那么来点儿复杂的装饰吧：
CSS
.complex-decor::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f06, transparent);
position: absolute;
top: -10px;
left: -10px;
}
.complex-decor {
position: relative;
padding: 20px;
background: #eee;
margin: 20px;
}
HTML
<body>
<div class="complex-decor">带装饰角的元素</div>
</body>
代码说明：
.complex-decor::before: 使用渐变和绝对定位在主要内容前创建装饰元素.complex-decor: 为父元素设置相对定位，以便伪元素可以相对于它进行定位
9.6 使用动画
还可以添加动画哦：
CSS
.animated::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: red;
animation: rotate 5s infinite;
margin: 20px auto;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
HTML
<body>
<div class="animated"></div>
</body>
代码说明：
.animated::before: 创建一个方形伪元素并通过关键帧为其添加旋转动画
GO TO FULL VERSION