html伪元素::before用法

121次阅读
没有评论

HTML 伪元素 ::before 可以在一个元素的内容之前插入新的内容,常用于生成内容、添加样式等方面。下面是一个使用 ::before 的示例 HTML 页面:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>::before Demo</title>
	<style>
		.box::before {
			content: "前缀";
			display: block;
			color: blue;
			font-size: 16px;
		}
		.box {
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

上述示例中,我们定义了一个类名为 box 的元素,并在它的内容之前插入了一个 ::before 伪元素,用于添加前缀。我们为 ::before 伪元素设置了 content 属性值为 “前缀”,这会在 box 元素的内容之前插入一个带有文本内容的元素。我们同时还设置了 display: block 让伪元素变成块级元素,从而占据一行的宽度,color 和 font-size 则用于设置伪元素的样式。

运行上述示例,我们将会看到一个红色正方形元素,并在它的内容之前有一个蓝色的 “前缀” 字样。这是因为我们使用了 ::before 伪元素,将 “前缀” 插入了 box 元素的内容之前。

正文完
 
评论(没有评论)