CSS - 伪元素 - ::after 属性

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>

打印本页