CSS 中的伪元素 ::after 用于在具有 content 属性的选定元素之后添加内容。它允许您插入文本、图像或装饰元素，而无需修改 HTML 结构。默认情况下，它是内联的。
语法
selector::after {
/* ... */
}
不建议使用伪元素 ::after 添加内容，因为屏幕阅读器可能无法访问它。
CSS ::after 示例
下面是一个使用伪元素 ::after 的简单示例：
<html>
<head>
<style>
p {
color: royalblue;
font-size: 1.5em;
border: 2px solid black;
text-transform: lowercase;
}
p::after {
content: url(images/logo.png) ;
position: relative;
}
</style>
</head>
<body>
<div>
<p>With pseudo-element ::after</p>
</div>
</body>
</html>
这是另一个示例，其中演示了伪元素 ::after 与其他元素的用法：
<html>
<head>
<style>
body {
width: 100%;
height: 100vh;
display: grid;
}
.glow {
padding: 10px;
width: 250px;
height: 50px;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 20px;
}
.glow::before {
content: '';
background: linear-gradient(60deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -4px;
left:-4px;
background-size: 400%;
z-index: -1;
filter: blur(15px);
width: calc(100% + 6px);
height: calc(100% + 6px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow:active {
color: rgb(246, 235, 235)
}
.glow:active::after {
background: transparent;
}
.glow:hover::before {
opacity: 1;
}
.glow::after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 20px;
background: linear-gradient(60deg, #293deb, #d019b4, #e6ac0c, #d95909, #d2ef13, #0ce45f, #a872e1, #e70db8, #2f09c8);
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
</style>
</head>
<body>
<button class="glow" type="button">HOVER OVER & CLICK!</button>
</body>
</html>
