CSS的 content CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。

值

默认值：normal

: :before 和 :after 伪类元素中会被对待none

none ： 不会产生伪类

string

url：图片路径。

URI 值会指定一个外部资源（图片的url）。如果该不能展示，它会被图片忽略或显示一些占位（如无图片标志）。
注：这种方式引入的图片，无法设置图片的宽高

attr()：

动态从元素的属性中获取内容

content里的字符串连接操作


counter

3个关键点正好对应CSS计数器的2个属性和1个方法，依次是：

  1. counter-reset(属性：父元素设置)
  2. counter-increment(属性：父元素设置)
  3. content:counter()/counters()(子元素元素设置)

counter-reset：计数器-重置。

1）默认值为0，并可以设置他的默认值。
.counter-reset{
counter-reset: number;
}
//0
.counter-reset{
counter-reset: number 1;
}
//1
2）counter-reset的计数重置可以是负数，例如-2。
也可以写成小数，例如2.99，不过就是IE和FireFox都不识别，认为是不合法数值，直接无视，当作默认值0来处理；不过Chrome不嫌贫嫉富，任何小数都是向下取整，如2.99当成2处理
3)多个计数器同时命名

 .counter-reset{
        counter-reset: num 3 bb 4;
    }
    .counter-reset::before{
        content: counter(num)  counter(bb);
    }
    .counter-reset::before{
        content: counter(num) 'hello' counter(bb);
    }
    //34
    //3hello4

4)counter-reset还可以设置为none和inherit. 去掉重置以及继承重置。

count-increment：计数器-递增

1)值的变化根据coutner-reset变化，在counter-reset的基础上加1
例：

  （1）
  .counter-reset{
        counter-reset: number;
        counter-increment: number;
    }
    .counter-reset::before{
        content: counter(number);
    }
    //1
    (2)
    .counter-reset{
        counter-reset: number 1;
        counter-increment: number;
    }
    .counter-reset::before{
        content: counter(number);
    }
    //2

2)当counter-increment 计算后，会更新counter-reset 的值，所以多个元素出现时，他的数据是递增的
例：
<

p class="counter-reset"></p>
    <p class="counter-reset"></p>
    <p class="counter-reset"></p>
    <p class="counter-reset"></p>
    .counter-reset{
        counter-increment: number;
    }
    .counter-reset::before{
        content: counter(number);
    }
    //1  此时counter-reset的值为1
    //2此时counter-reset的值为2
    //3此时counter-reset的值为3
    //4此时counter-reset的值为4

3）如果counter-reset 设置了默认值，那么当多个元素出现时，他们的值是相同的，即：当counter-reset设置了默认值，他的值不会随着counter-increment的值变化

<p class="counter-reset"></p>
    <p class="counter-reset"></p>
    <p class="counter-reset"></p>
    <p class="counter-reset"></p>
    .counter-reset{
    	counter-reset:number 1;
        counter-increment: number;
    }
    .counter-reset::before{
        content: counter(number);
    }
    //2
    //2
    //2
    //2

4)当只有一个元素时，counter-increment无论时放在父元素还是子元素上结果都是一样的，在counter-reset的基础上+1，

  <p class="counter-reset"></p>
  例：
  写法一
  .counter-reset{
        counter-increment: number;
    }
    .counter-reset::before{
        content: counter(number);
        
    }
    写法二：
    .counter-reset{
    }
    .counter-reset::before{
        counter-increment: number;
        content: counter(number);
        
    }
    结果输出时一致的  
    //1

5)当有多个元素时，counter-increment在父元素上遵从上面的规则，如果放在子元素上，输出的数值不会累计递增

<p class="counter-reset"></p>
<p class="counter-reset"></p>
.counter-reset::before{
    counter-increment: number;
    content: counter(number);
    
}
//1
//1

6)可以设置counter-increment 的步长，并且可以时负数

<p class="counter-reset"></p>
<p class="counter-reset"></p>
.counter-reset:{
	counter-increment: number 2;
}
.counter-reset::before{
    
    content: counter(number);
    
}
//2
//4
.counter-reset:{
	counter-increment: number -2;
}
.counter-reset::before{
    
    content: counter(number);
    
}
//-2
//-4

7）可以命名2个计数器

.counter-reset{
    counter-increment: number 4 counter 1;
}
.counter-reset::before{
    
    content: counter(number) counter(counter);
    
}

3.counter()/counters()
1）counter() 语法：counter(name,style),
style的值，与list-style-type的值一致：list-style-type：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
支持级联：即：可以有多个counter（）一起用
2)counters(name,sting,style)，目前这个测试有兼容性问题

更多推荐

css属性 content