使用CSS伪元素，before and after 画出一个五角星
before 和 after 顾名思义 其就是附着在元素前后的 伪元素，说他是伪元素的意思就是，元素不是在DOM中生成的，而是在浏览器渲染引擎渲染CSS的时候画上去的，所以你在浏览器查看元素上是看不到伪元素的HTML结果的。
还有一点与大家想象的不同的是 ，before和after 和父元素在一个线性空间内的，而是另一层元素盖在父元素上的。
在伪元素的样式上，可以使用content属性去指定 元素的内容。如果设置为 '' 或是 None，那我们是看不到该元素的。默认去情况下伪元素是行内显示的，想让它呈现出不同的效果的话，就需要设置它为块显示。
content属性可以是设置的值：
-
"string" 字符串内容会直接显示在页面当中，当然如果你在字符串中填写html标签的话是不会被解析的。
li::after {content: '/';} -
attr() 它可以调用当前元素的属性进行显示，比较用于的一个例子就是 显示连接上的提示文字
a:after { content:"(" attr(href) ")"; } -
url 用于引用图片，或是 css 渐变属性。
li::after { content: url(bg.png)} -
counter 调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。
li::before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
实例
清除浮动 通常我们清除清除浮动的方式就是在浮动元素后面添加一个空的Div标签，然后在设置它的清除浮动要是，使用after伪元素，我们就不需要添加无意义的div标签在html中了，下面的例子就使用了伪元素清除浮动，并且也展示了，使用伪元素制作面包屑导航条的间隔符。
html
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
</ul>
css
ul {
margin: 100px;
background: #ccc;
padding: 10px;
border: 1px solid #999;
list-style:none;
}
ul::after {
clear: both;
content: '';
display: block;
}
li {
float: left;
margin-left: 10px;
}
li::after {
content: '/';
margin-left: 10px;
}
li:last-child::after{
content: none;
}
五角星
下面这个五角星，就是有三个三角形组成的。蓝色的三角形是有元素自身构成的。剩下的红和黄都是有before和after两个伪元素构成的，当然要想画出这个五角星，只使用伪元素是不行的，还需要是用CSS3的transform属性使得图形能够旋转角度。
<div id='star-five'></div>
#star-five {
margin-top: 60px;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid blue;
position: relative;
transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
content: '';
transform: rotate(-35deg);
}
#star-five:after {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid yellow;
top: 7px;
left: -110px;
position: absolute;
display: block;
content: '';
transform: rotate(-70deg);
}
参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before
