前端HTML伪元素的使用

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*伪元素 通过css方式给标签的首或者尾添加一个标签*/
			.one:after{
				/*必写属性  默认是行元素属性*/
				content: "哈哈";
				/*正常标签css样式设置!!!*/
				background-color: salmon;
				color: yellow;
				font-size: 30px;
				width: 200px;
				display: block;
			}
			
			.one::before{
				content: "你好 世界!";
				
			}
			/*--------------*/
			.box{
				background-color: deeppink;
				position: relative;
			}
			
			/*使用伪元素   处理父子浮动塌陷问题!!!*/
			.box:after{
				content: "";
				clear: both;
				display: block;
				/*在父标签末尾追加一个 伪元素并且是块级特性
				 并且清除以上兄弟标签的影响 来撑起父元素高度!*/
			}
			
			
			
			.d1{
				width: 300px;
				height: 200px;
				background-color: palegreen;
				float: left;
			}
			.d2{
				width: 300px;
				height: 300px;
				background-color: palevioletred;
				float: left;
			}
			.over{
				width: 340px;
				height: 340px;
				background-color: rgba(0,0,0,0.4);
				position: absolute;
				left: 280px;
				top: -20px;
			}
		</style>
	</head>
	<body>
		<div class="one">
			<a href="###">京东</a>
			<p>段落块元素</p>
			<span>你呵呵</span>
		</div>
		
		
		
		
		<!--关键作用!!-->
		<div class="box">
			<div class="d1">1111111111</div>
			<div class="d2">2222222222</div>
			<div class="over">悬浮层</div>
			<!--::after clear:both;-->
		</div>
		
		<h1 style="background-color: salmon;">大标题</h1>
	</body>
</html>

运行结果：

前端三剑客
#HTML
前端HTML伪元素的使用
http://ultracode.cn/2020/10/18/HTML/前端HTML伪元素的使用/
作者
Win
发布于
2020年10月18日
许可协议