伪元素:after和:before的深入理解

许小珂今天看了一篇之前看过的关于利用伪元素:after和:before制作小三角的简述,因为没代码,只是说利用伪元素可以制作出三角形,当时并没有仔细研究。

正好趁着今早没事就查阅了这方面的相关资料。可以说是收获非常大,不仅对制作小三角熟练了,而且对伪元素:after和:before的属性也理解了很多,许小珂就把今天的理解分享给大家。

首先介绍下这两个伪元素常用的语法规则:

选择器+::after或选择器+::before{
    content:"";
    其他css样式;
}

之前的写法是前面有一个冒号,现在css3规定可以使用两个冒号。

许小珂在测试这两个伪元素的时候发现其几种特性:

伪元素:after和:before默认是行内元素;
设置选择器为相对定位,那么伪元素:after和:before是相对于所设置的选择器进行绝对定位的;
可能写的比较绕嘴,上代码大家可以直接感受下这两个伪元素的特性

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS输出各种图形</title>
<style type="text/css">
.square {
	width: 100px;
	height: 100px;
	background-color: #FFF;
	position: relative;
	border: 2px #000000 solid;
}

.square:before {
	content: "";
	width: 0px;
	height: 0px;
	display: block;
	position: absolute;
	z-index: 2;
	top: 25%;
	right: -28px;
	border: 15px solid #FFF;
	border-color: transparent transparent transparent #FFF;
}

.square:after {
	content: "";
	width: 0px;
	height: 0px;
	display: block;
	position: absolute;
	z-index: 1;
	top: 25%;
	right: -30px;
	border: 15px solid #FFF;
	border-color: transparent transparent transparent #000;
}
</style>
</head>
<body>
        <div class='square'></div>
</body>
</html>

仔细研究下以上代码,相信你会有很大的体会。

并且许小珂在操作时也遇到了一些至今没想明白的问题,比如写好下面代码时,许小珂觉得会在网页上面形成一个四边颜色不同的正方形,但事实却是形成了一个长方形,好奇怪。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS输出各种图形</title>
<style type="text/css">

.square::after {
	content: "";
	border: 15px solid #000000;
	border-color: red blue yellow orange;
	width: 0;
	height: 0;
}

</style>
</head>

<body>
        <div class='square'></div>
</body>
</html>

如图:
伪元素:after和:before的深入理解 伪元素:after和:before的深入理解
虽然没有找到问题根源所在,但好歹解决了这个问题,只需设置::after伪元素为display:block即可。