342day（伪元素，包裹浮动元素，开发实例）

最新推荐文章于 2024-01-29 11:49:29 发布

原创最新推荐文章于 2024-01-29 11:49:29 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了CSS中伪元素的应用及如何使用伪元素解决浮动元素布局问题。通过具体实例展示了如何利用:before和:after伪元素为元素添加内容，并介绍了一种清除浮动的方法。

《2018年9月10日》【连续342天】

标题：伪元素，包裹浮动元素，开发实例；
内容：

1.伪元素：

<span>
		234
</span>

span::before{
	content: "abc";
}

span::after{
	content: "ttt";
}

包裹浮动元素：

（伪元素）

<ul class="nav">
		<li class="list-item">
			<a href="#">天猫</a>
		</li>
		<li class="list-item">
			<a href="#">聚划算</a>
		</li>
		<li class="list-item">
			<a href="#">天猫超市</a>
		</li>
	</ul>

*{
	margin: 0;
	padding: 0;
	color:#424242;
	font-family: arial;
}


a{
	text-decoration: none;
}

.nav::after{
	content: "";
	display: block;
	clear: both;
}
.nav{
	list-style:none;
}

.nav .list-item{
	float: left;
	margin: 0 10px;
	height: 30px;
	line-height: 30px;
}

.nav .list-item a{
	padding: 0 5px;
	color: #f40;
	font-weight: bold;
	height: 30px;
	display: inline-block;
	border-radius: 15px;
}

.nav .list-item a:hover{
	background-color: #f40;
	color: #fff;
}