::before和::after伪元素

伪元素的意思就是，元素不是在DOM中生成的，而是在浏览器渲染CSS的时候画上去的，所以在浏览器查看元素上是看不到伪元素的HTML结构的。

before 和 after 顾名思义就是附着在元素前后的伪元素。

默认情况下伪元素是行内显示的，想让它呈现出不同的效果的话，就需要设置它为块 {display:block} 显示。

伪元素可以使用content属性去指定元素的内容。

1."string" 字符串

li::after {content: '/';}

　　"string" 字符串内容会直接显示在页面当中，如果你字符串中填写html标签的话是不会被解析的。

2.attr()

a:after { content:"(" attr(href) ")"; }

　　attr() 它可以调用当前元素的属性进行显示

3.url

li::after { content: url(bg.png)}

　　url 用于引用图片，或是 css 渐变属性。

4.counter 调用计数器

li::before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

　　counter 调用计数器，可以不使用列表元素实现序号功能。