CSS ::before和::after伪元素

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

CSS ::before和::after伪元素

实例

推荐阅读更多精彩内容