【CSS系列】被忽略的content属性
版权声明：本文为原创文章首发于公众号：六小登登 , 你可以随意转载但请务必注明出处！！！关注微信公众号：六小登登，回复 「1024」领取资源大礼包 https://blog.csdn.net/qq_32135281/article/details/89667724
CSS的 content属性，大家应该都不陌生，很多时候我们都使用过，一般情况下你看到最多的用法无外乎这样两种：一种用于清除浮动，一种用于我们经常使用的字体图标。
.clear:after {
content: "";
display: block;
clear: both;
}
.icon:before {
content: "\e778";
}大多数都会停留这个阶段，很少会探索更多的用法，甚至有些人认为它的用法也就这么多。
不过当你看到这篇文章时，会发现这是一种多么错误的想法。你会发现原来还有这么多，被你忽略而且好用的功能。
接下来就让我们一起见识见识它的更多用法。
介绍
首先我们先来看看 MDN 上对 content是如何描述的。
CSS 的 content属性用于在元素的 ::before和 ::after伪元素中插入内容。使用 content属性插入的内容都是匿名的可替换元素。
从上面看到它只能用于「伪元素」中，但其实它在 chrome 浏览器中，可用于任何元素，这个可能很多人都不知道，不信你可以看下面这个例子。
<template>
<div class="box"></div>
</template>
<style>
.box {
content: url(https://picsum.photos/id/237/300/200);
}
</style>不过除了chrome浏览器，其它浏览器并不支持直接在元素上使用，只能用在「伪元素」上。所以使用场景并不多。
你已经看到 content的值可以为字符与 url。那它还可以使用那些值呢？让我们一一来看。
属性值
1.String
指定的文本值。字符串是最常见的用法，比如上面说的字体图标。不过你还可以做的更多。
<template>
<div>
<form class="form">
<label>用户名</label><input type="text" />
<label>手机号</label><input type="text" />
<label>邮箱</label><input type="text" />
</form>
</div>
</template>
<style>
.form label:before {
content: "*";
color: red;
}
</style>Q：是不是发现了新大陆？
A：是
Q：登哥，你是如何看待别人都说你很帅的？
A：我这该死的，无处安放的魅力
<template>
<p class="question">是不是发现了新大陆？</p>
<p class="answer">是</p>
<p class="question">登哥，你是如何看待别人都说你很帅的？</p>
<p class="answer">我这该死的，无处安放的魅力</p>
</template>
<style>
.question:before {
content: "Q：";
}
.answer:before {
content: "A：";
}
</style>
2.url
值可以为：图像，声音，视频等内容。
通常你想在网页中显示一张图片，一般是两种方式：使用<img>或者使用 background-image。
除此之外，你还可以利用 content属性，它的值可以是图片的地址。
比如下面这种方式：
<template>
<div class="image"></div>
</template>
<style>
.image:before {
content: url(https://picsum.photos/id/237/300/200);
}
</style>不过以这种方式插入时无法更改图像的尺寸。所以我们很少这么使用，不过有个场景是比较适合这种方式它可以很容易实现一个图片的切换。比如下面这个例子。
<template>
<img class="img-item" src="/head.png">
</template>
<style>
.img-item {
width: 200px;
}
.img-item:hover {
content: url(/gonghao.jpg);
}
</style>虽然效果上把图片替换，其实如果细心的你，打开控制台会发现它的 src 值是没有改变的。也就是说它修改的是我们的视觉效果而已。
3.attr
可以用它获取 HTML 属性的值。
年龄：18
<template>
<label class="label" data-label="年龄">18</label>
</template>
<style>
.label:before {
content: attr(data-label) ": ";
}
</style>4.counter（计数器）
这个就比较厉害了，是一个非常强大的功能，如何强大的呢？接下来我们就来看看。通常你要实现一个动态的递增数，都是通过 JavaScript 实现，你可能都没有想过 CSS 也是可以实现递增数。
这个牛逼的东西就是「计数器」。
先来看看什么叫计数器：
本质上 CSS 计数器是由 CSS 维护的变量，这些变量可能根据 CSS 规则增加以跟踪使用次数。
计数器的值通过使用 counter-reset和 counter-increment操作，然后通过 counter()或 counters()函数来显示在页面上。
光说不练假把式，来看看如何使用它。
首先，使用前必须要通过 counter-reset重置一个初始值。它默认是 0。你也可以指定初始值。
counter-reset: record; /* 重置计数器为 0 */
counter-reset: record 2; /* 重置计数器为 2 */除此之外，它的值还可以是多个。
24
<template>
<h3></h3>
</template>
<style>
h3 {
counter-reset: first 2 second 4;
}
h3:before {
content: counter(first) counter(second);
}
</style>利用计数器我们很容易实现这种有序列表的效果。
<template>
<div class="page-list">
<p>你瞧，我这该死的，无处安放的魅力</p>
<p>你瞧，我这该死的，无处安放的魅力</p>
<p>你瞧，我这该死的，无处安放的魅力</p>
</div>
</template>
<style>
.page-list {
counter-reset: counter;
}
.page-list p:before {
padding: 2px 8px;
border: 1px solid #ccc;
counter-increment: counter;
content: counter(counter);
}
</style>少侠且慢，你以为到这里就结束了吗？counter()函数可以接受两个参数。
counter(name, list-style-type)list-style-type 的值可以为：disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit
所以我们可以把上面的一个案例改成这样。如果你感兴趣，你可以这些值都玩一遍。
content: counter(counter, upper-roman);上面我们提到，除了 counter()之外还有一个 counters()，那它是做什么的呢？
counters()对嵌套的计数器非常有用，它可以在不同级别的嵌套计数器之间插入字符串。
比如：我们生成一个目录结构。
<template>
<ol class="list">
<li>item</li>
<li>item
<ol class="list">
<li>item</li>
<li>item</li>
<li>item
<ol class="list">
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</template>
<style>
.list {
counter-reset: section;
list-style-type: none;
}
.list li:before {
counter-increment: section;
content: counters(section, "-") ".";
}
</style>参考：