许小珂今天看了一篇之前看过的关于利用伪元素: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伪元素为display:block即可。