首页手记【CSS系列】被忽略的content属性

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

标签：

CSS3

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>

不过对于这种兼容性不太良好的情况下，所以使用场景并不多。

你已经看到 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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/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

点击查看更多内容