CSS 偽類(lèi)沒(méi)有生效？探索 content 屬性！

以下文章來(lái)源于前端雜貨鋪 ，作者Gopal

問(wèn)題就是 CSS 偽類(lèi)沒(méi)有生效，具體表現(xiàn)如下，可見(jiàn) demo[1]:

<span class="desc">
   我是 Gopal。
</span
.desc {
  display: block;
  font-size: 30px;
  color: #000;
}
.desc:before {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: red;
}
可以看到，偽類(lèi)并沒(méi)有生效。



問(wèn)題的解決
解決的方法很簡(jiǎn)單，設(shè)置 content 屬性，而且要具有一定的寬高，可以設(shè)置 display 為 inline-block 和 block，讓元素的寬高生效，如下，添加一行：

.desc:before {
+ content: ' ';
  display: inline-block;
  width: 10px;
  height: 10px;
  background: red;
}



那這個(gè) content 是啥屬性，為何具有如此魔力？

探索 content 屬性
來(lái)看 MDN 的描述：

CSS 的 content CSS 屬性用于在元素的  ::before 和 ::after 偽元素中插入內(nèi)容。使用 content 屬性插入的內(nèi)容都是匿名的可替換元素。

重點(diǎn)關(guān)注，插入內(nèi)容，這里就很豐富了。這里大概說(shuō)下幾種常見(jiàn)的場(chǎng)景。以下的 Demo 都在這里[2]。

填充字符串
我們經(jīng)常需要在一些特殊的行后面加一些標(biāo)識(shí)，比如品類(lèi)列表，如果是新品則提示 New 字樣。

<h2>品類(lèi)列表</h2>
<ol>
    <li>蘋(píng)果</li>
    <li class="newEntry">香蕉</li>
    <li>菠蘿</li>
    <li class="newEntry">葡萄</li>
</ol>
.newEntry::after {
    content: " New!";
    color: red;
}
效果如下：



填充圖片
有時(shí)候，我們希望在段落前面插入一個(gè) ICON，可以通過(guò) url()、URI() 指定 ICON 資源地址。URI 值會(huì)指定一個(gè)外部資源（比如圖片）。如果該資源或圖片不能顯示，它就會(huì)被忽略或顯示一些占位（比如無(wú)圖片標(biāo)志）。

<p class="desc">我是 Gopal</p>
.desc:before {
   content: url('https://p3-passport.byteacctimg.com/img/user-avatar/a0383600d66ccc81b3396b75cf3a95ea~300x300.image');
}





效果如下：



計(jì)數(shù)器玩轉(zhuǎn)列表編號(hào)
content 屬性還有一個(gè)很強(qiáng)大的設(shè)置方式，counter() 函數(shù)。來(lái)看看吧！

對(duì)于列表，我們經(jīng)常需要自定義它的編號(hào)，比如給編號(hào)數(shù)字添加相關(guān)背景等等。

那我們?cè)趺赐ㄟ^(guò) content 屬性完成這個(gè)功能呢？

這里需要結(jié)合 CSS 計(jì)數(shù)器。CSS 計(jì)數(shù)器是網(wǎng)頁(yè)范圍變量，可以使用 CSS 規(guī)則更改其值。

我們通過(guò) Demo 來(lái)看看怎么處理的。

先看 HTML 結(jié)構(gòu)：

<div class="list">
  <div>My first item</div>
  <div>My second item</div>
  <div>My third item</div>
</div>
第二步，使用 counter-reset 屬性設(shè)置一個(gè)計(jì)數(shù)器。list-number 是此處要使用的變量名。

.list {
  counter-reset: list-number;
}
第三步，使用 counter-increment 屬性增加計(jì)數(shù)器的值?，F(xiàn)在，每次出現(xiàn) .list div 元素時(shí)，list-number 變量都會(huì)增加一。

.list div {
  counter-increment: list-number;
}
最后一步，在 content 屬性的 counter() 函數(shù)中使用 :before 偽元素來(lái)顯示數(shù)字。

.list div {
  counter-increment: list-number;
+  content: counter(list-number);
}
效果如下：








我們?cè)俣嗉有揎棧?br>
.list div {
  counter-increment: list-number;
  content: counter(list-number);
+  margin-right: 10px;
+  margin-bottom:10px;
+  width:35px;
+  height:35px;
+  display:inline-flex;
+  align-items:center;
+  justify-content: center;
+  font-size:16px;
+  background-color:#d7385e;
+  border-radius:50%;
+  color:#fff;
}
效果如下：



counter() 函數(shù)可以具有兩個(gè)參數(shù)：計(jì)數(shù)器名稱(chēng)和計(jì)數(shù)器格式。對(duì)于第二個(gè)參數(shù)，可以使用任何有效的 list-style-type 值。比如，我希望顯示羅馬數(shù)字。那可以修改如下：

.list div:before {
  counter-increment: list-number;
- content: counter(list-number);
+ content: counter(list-number, lower-roman);
  // ....
}



是不是很酷？

最后，大家有在項(xiàng)目中經(jīng)常用 content 屬性么？經(jīng)常用它的哪些功能呢？

參考
使用CSS計(jì)數(shù)器花式玩轉(zhuǎn)列表編號(hào)[3]
參考資料
[1]
demo: https://codepen.io/gpingfeng/pen/GRQzBwV

[2]
這里: https://codepen.io/gpingfeng/pen/QWQYVdM

[3]
使用CSS計(jì)數(shù)器花式玩轉(zhuǎn)列表編號(hào): https://segmentfault.com/a/1190000038292189

作者：Gopal


歡迎關(guān)注微信公眾號(hào) ：前端快快跑