【CSS系列】被忽略的content属性

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://user-gold-cdn.xitu.io/2019/4/28/16a62ff6286b1dff?w=300&h=200&f=jpeg&s=13642);
}
</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://user-gold-cdn.xitu.io/2019/4/28/16a62ff6286b1dff?w=300&h=200&f=jpeg&s=13642);
}
</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>
复制代码

好了到这里本篇文章结束了，今天说了不少好用的方法，并且是常常容易忽略的甚至是没有使用过的。经过今天的文章我相信你们应该对 content 属性有了更多的了解。

不过有一点须要注意，content还有其它的属性，不过我认为其它属性和这几个比起来，就显比较不实用了，若是你对其感兴趣，不防本身研究下。

若是你没有看过瘾，更多干货文章，在个人公众号：六小登登。

这里有个人更多故事，欢迎来与我一块儿交流。

以为文章不错对你有所启发，点赞是一种态度也是一种承认。

参考：

《css世界》

Using CSS counters