css属性 content

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
例：