HTML5 开发系列 之 伪元素的真谛

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/z_x_Qiang/article/details/82819053

伪元素

伪元素其实是一个元素,但是没有真正的定义出来而已,但是消失效果其实就是一个行内元素的效果

::before 其实就是在一个元素的内部,最前面添加了一个行内元素;

可以改变显示模式,设置宽高,背景就可以看到这个元素的真是面貌;

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.content{
				margin: 200px;
			}
			span{
				width: 100px;
				height: 100px;
				background-color: red;
				display: block;
			}
			.content:hover::before{
				content: "";
				width: 100px;
				height: 100px;
				border: 10px solid yellow;
				float: left;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<span></span>
		</div>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/z_x_Qiang/article/details/82819053