CSS中:before和:after伪元素的content属性以及counter属性使用

:before和:after是CSS中定义的伪元素,配合content属性，可以在元素的前面或后面插入新元素,content即插入元素的值,

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

简单的实例如下：

在每个 <p> 元素的内容之前插入新内容：

p:before
{ 
content:"台词：";
}

可以有如下的定义值

值	说明
none	设置Content，如果指定成Nothing
normal	设置content，如果指定的话，正常，默认是”none”（该是nothing）
counter	设定计数器内容
attr (attribute)	设置Content作为选择器的属性之一。
string	设置Content到你指定的文本
open-quote	设置Content是开口引号
close-quote	设置Content是闭合引号
no-open-quote	如果指定，移除内容的开始引号
no-close-quote	如果指定，移除内容的闭合引号
url( url )	设置某种媒体（图像，声音，视频等内容）
inherit	指定的content属性的值，应该从父元素继承

其中计数器counter使用实例如下

body {
    
  counter-reset: section;                     /* Set a counter named 'section', and it`s initial value is 0. */
}