使用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

css

五角星

下面这个五角星，就是有三个三角形组成的。蓝色的三角形是有元素自身构成的。剩下的红和黄都是有before和after两个伪元素构成的，当然要想画出这个五角星，只使用伪元素是不行的，还需要是用CSS3的transform属性使得图形能够旋转角度。

<div id='star-five'></div>