css伪元素before和after用法详解

最新推荐文章于 2024-03-12 18:03:29 发布

Wendy Bryant

最新推荐文章于 2024-03-12 18:03:29 发布

阅读量8.3k

点赞数 10

分类专栏： css 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/WenDy18cm/article/details/113266614

版权

css 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

css伪元素before和after用法详解

要想了解伪元素before和after到底是什么，首先就应该打开编译器敲入代码并在浏览器运行检查

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background: pink;
				margin: 100px auto;
				position: relative;
			}
			.box::before{
				content: "我是before";
				background: yellowgreen;
				width: 100px;
				height: 100px;
			}
			.box::after{
				content: "我是after";
				background: yellow;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			box
		</div>
	</body>
</html>

由上图可知，伪元素before是.box中的第一个子元素，伪元素after是.box中的最后一个子元素，且由于二者都设置了宽高并未生效，且并未独占一行，由此可知，伪元素before和after都属于行内元素。

下面，我总结了几个伪元素before和after的几个重点，如果大家有疑问可以自行验证，或者在评论区留言。

1、伪元素before和after的content属性必须填写，可设置为空串；

2、伪元素before和after的content属性中的文本是不能被搜索引擎获取的；

3、伪元素before和after属于行内元素，并可通过设置display属性转换为块元素或者行内块元素；

关于伪元素的应用：

解决浮动元素导致其父元素高度塌陷的问题

.clearfix:after {

        content:"";

        display: block;

        clear: both;

}

给高度塌陷的父元素添加类名clearfix即可。

如果本文有任何错误，欢迎各位批评指正，或者在评论区留下你们的学习建议或看法，谢谢。

Wendy Bryant

关注

10
点赞
踩
43

收藏

觉得还不错? 一键收藏
1
评论
css伪元素before和after用法详解

css伪元素before和after用法详解要想了解伪元素before和after到底是什么，首先就应该打开编译器敲入代码并在浏览器运行检查<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 300px; ...
复制链接

扫一扫