420day（伪元素）

最新推荐文章于 2025-11-17 15:35:02 发布

原创最新推荐文章于 2025-11-17 15:35:02 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

本文通过实例演示了如何使用CSS伪元素如::before和::after，以及伪类选择器如::selection来增强网页样式。展示了如何在元素前后插入内容，以及改变选中文本的背景颜色。

《2018年11月28日》【连续420天】

标题：伪元素；

内容：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*伪元素选择器*/
		/*E::first-letter
		E::first-line
		E::selection*/
		/*p::first-letter {
			font-size: 25px;
		}*/
		/*p::first-line {}*/
		p::selection {
			background-color: skyblue;
			color: red;
		}
		div::before { /*内部的内容前面插入*/
			content: "我";
			/*width: 200px;
			height: 200px;
			background-color: blue;
			display: block;*/
		}
		div::after {
			content: "20岁";
		}

	</style>
</head>
<body>
	<p>站姿自由女神25美分硬币是美国铸币局1916至1930年间生产的一种25美分硬币，用于取代1892年投产的巴伯25美分硬币。硬币图案由雕塑家赫尔蒙·阿特金斯·麦克尼尔设计，正面刻有自由女神，背面刻有飞鹰。</p>
	<div>今年</div>
</body>
</html>