伪元素

HTML/CSS 评论

伪元素

:first-letter

首字符伪元素

修改第一个字符的样式

1
2
元素名:first-letter{
}

:first-line

首行伪元素

修改首行的样式

1
2
元素名::first-line{
}

:before

表示元素最前面部分

:before和:after通常搭配content来使用

1
2
3
p:before{
content: "2133";
}

:after

表示元素最后面

1
2
3
p:after{
content: "2133";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p:first-letter{
				color: red;
				font-size: 50px;
			}
			p:first-line{
				background-color: saddlebrown;
			}
			p:before{
				font-size: 50px;
				content: "www";
			}
			p:after{
				font-size: 50px;
				content: ".com";
				color: green;
				

			}

		</style>
	</head>
	<body>
		
		<p>12342112423141242</p>
		
	</body>
</html>

YanChen

Personal profile