探索CSS 伪元素content 属性

今天来聊一下伪元素中content属性的一些高级用法

填充图片

有时候，我们希望在段落前面插入一个 ICON，可以通过 url()、URI() 指定 ICON 资源地址。URI 值会指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位（比如无图片标志）。

计数器玩转列表编号

content属性还有一个很强大的属性，couter()函数，下面一起来看下！

对于列表，我们经常需要自定义它的编号和添加相关样式等等；那我们怎么通过content属性完成这个功能呢？这里需要结合css计数器。

  <div class="list">
    <div class="list-item">list-item1</div>
    <div class="list-item">list-item2</div>
    <div class="list-item">list-item3</div>
  </div>

第一步，使用couter-reset属性设置一个计数器，list-number是此处要使用的变量名。

      .list {
            counter-reset: increase-num;
          }

第二步，使用counter-increment属性增加计数器的值，现在，每次出现.list div元素时，list-number变量都会增加一；

    .list-item{
           counter-increment:list-number;
    }

最后一步，在content属性的counter()函数中使用::before伪元素来显示文字

    .list-item::before{
        content:counter(list-number);
    }

效果如下：

此外我们还可以在里面多加一些样式

end!