CSS Content 属性

在伪元素中可使用 content 属性，能够实现内容的插入且内容始终只会存在于样式中，所以很适合作为反爬虫手段来使用，具体的用途主要有下列几种

插入文字

文字直接赋予 content 属性

p::before {
   content:'A' 
}

<p>X</p>

output：AX

插入符号

如果要给内容加上书引号，可以使用以下方式：

p::before {
    content:'《'
}
p::after {
    content:'》'
}

<p>X</p>

output：《X》

除此之外还可以设置quotes属性，通过open-quote或close-quote来调用，举个例子：

p {
   quotes:'《' '》'; 
}
p::before {
    content:open-quote
}
p::after {
    content:close-quote
}

<p>X</p>

output：《X》

quotes 支持传入多组字符串，各组之间是嵌套关系，举个例子：

p {
   quotes:'《' '》' '?' '?'; 
}
p::before {
    content:open-quote
}
p::after {
    content:close-quote
}

<p>XX<p>AAA</p>XX</p>

output：《XX?AAA?XX》

插入图片

content 直接传入url( imgPath )即可插入图片

div::before {
    content:url(imgPath);
}

但是图片无法修改其大小，可以用伪元素+背景图片代替

div::before {
    content:'';
    background-image:url(imgPath);
    background-size:200px 200px;
    position: absolute;
    width:200px;
    height:200px;
}

插入编号

content 的 counter 属性能够实现项目的连续编号添加，

我们举一个树状列表的例子：

<ul class='outer'>
    <li class='outer-item'>
        外部项目
        <ul class='inner'>
            <li class='inner-item'>内部项目</li>
            <li class='inner-item'>内部项目</li>
            <li class='inner-item'>内部项目</li>
        </ul>
    </li>
    ...
</ul>

首先使用 counter-reset 初始化计数器，如果未指定初始值，则默认为0，也可通过设置第二个参数指定起始数值，初始值必须是整数。

ul {
    counter-reset: xcounter;
}

使用然后在 content-increment 触发计数器，默认为 +1，也可以通过设置第二个参数指定累加数值。

li::before {
    content: counter(xcounter); /*读取当前计数器的值*/
    counter-increment: xcounter; /*触发计数器的累加*/
}

这时候输出的是[查看例子]：

每当遇到 ul 时，计数器都会重置，导致二级内容并没有继承一级内容，这时就需要counters()：一个能嵌套计数的方法，他能够记住父级的值，现在用 counters替换counter（counters 还需要第二个参数用来设置拼接字符）

li::before {
    content: counters(xcounter,'-')'.'; /*最后加上的 . 与 counters 无关*/
    counter-increment: xcounter; 
}

这最后输出结果是这样的[查看例子]：