CSS中content屬性的妙用

前言

本文講解CSS中使用頻率並不高的content屬性，經過多個實用的案例，帶你由淺入深的掌握content的用法，讓代碼變得更加簡潔、高效。

定義

W3school中這樣定義：

content 屬性與 :before 及 :after 僞元素配合使用，來插入生成內容。

該屬性用於定義元素以前或以後放置的生成內容。默認地，這每每是行內內容，不過該內容建立的框類型能夠用屬性 display 控制。

在前端平常開發中，content屬性使用頻率並不高，因此開發者通常對它的理解並不深刻，一般會在清除浮動、字體圖標時偶爾使用。下面經過各類案例，來一塊兒看看content的妙用。

案例

1. 清除浮動

<!--css-->
.left {float: left}
.right {float: right}
.clear:after {
    content: '';
    clear: both;
    display: block;
}

<!--html-->
<div class="container clear">
    <div class="left">左</div>
    <div class="right">右</div>
</div>

父元素.container中兩個子元素.left和.right浮動後會脫離文檔流，沒法撐起容器，形成.container高度爲0。使用僞元素:after清除浮動，三個屬性缺一不可：

• content: ''; 經過:after添加一個內容爲空的僞元素。
• clear: both; 僞元素:after兩側浮動清除。
• dispaly: block; 設置塊元素，由於clear只對塊元素有效。

說到clear屬性，使用最多的就是clear: both，left/right用的卻不多，由於both已經包含left/right特性，簡單直接還有效。想更加深刻了解clear屬性，能夠看看張鑫旭大神的準確理解CSS clear:left/right的含義及實際用途。

2. 小三角的氣泡窗口

<!--css-->
.box {
    width: 200px;
    height: 100px;
    border-radius: 5px;
    background: #fff;
    position: relative;
}
.box:after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: 20px;
    width: 0;
    height: 0;
    border-top: 10px solid #fff;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

<!--html-->
<div class="box"></div>

效果：

配合僞元素:after，實現了一個右下角帶倒三角指向性的氣泡窗口。經過調整border各邊的顏色和絕對定位位置，能夠繪製出指向不一樣的氣泡窗口，只用一個div標籤實現，是否是既簡潔又美觀。可能你會想到這是僞元素:after的效果，和content屬性無關，實際上去掉content後:after是不生效的。

3. 字體圖標

第一種是瀏覽器自帶的特殊字符：

<!--css-->
.music:before {
    content: '\266C';
    color: red;
}

<!--html-->
<span class="music">晴天-周杰倫</span>

效果：

瀏覽器支持不少字體圖標，如：天氣☀、雪花❄、三葉草☘、太極☯等等有趣的字符。參考網頁HTML特殊字符編碼對照表。

第二種是外部引入字體圖標，如Bootstrap中的Glyphicon字體圖標：

<link rel="stylesheet" href="../static/css/bootstrap.min.css">

<!--html-->
<span class="glyphicon glyphicon-heart"></span>

效果：

這裏爲何沒有寫CSS樣式呢，由於bootstrap.min.css中已經定義好了glyphicon-heart的樣式，直接在官網上查看：

須要說明的是，本地引入bootstrap.min.css後，還須要引入字體圖標庫glyphicons-halflings-regular.woff2，字體圖標才能生效。

<!--bootstrap.min.css-->

<!--format 屬性是幫助瀏覽器識別字體的-->
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url(../fonts/glyphicons-halflings-regular.eot);
    src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
    url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),
    url(../fonts/glyphicons-halflings-regular.woff) format('woff'),
    url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),
    url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
}

按照上述url路徑，將glyphicons-halflings-regular.woff2放到以下目錄結構中便可。

4. 無內容提示

<!--css-->
<!--:empty爲空時匹配-->
div:empty:after {
    content: '暫無數據';
    color: red;
}

<!--html-->
<div>有內容數據</div>
<div></div>

效果：

當元素內容爲空時，經過content內容「暫無數據」進行展現。可以使用場景：後臺接口返回數據後，插入到頁面DOM中，當後臺返回數據爲空時，經過CSS直接提示暫無數據，不須要使用JavaScript處理。

一個有趣的現象，content內容「暫無數據」沒法被選中，這是由於僞元素用於建立一些不在文檔樹中的元素，雖然用戶能夠看到這些文本，可是這些文本實際上不在文檔樹中。

5. 麪包屑菜單

<!--css-->
ul li {
    display: inline-block;
    font-weight: bold;
}

ul li:not(:last-child):after {
    content: '\276D';
    margin: 5px;
}

<!--html-->
<ul>
    <li>首頁</li>
    <li>商品</li>
    <li>詳情</li>
</ul>

效果：

又是一個content值爲特殊字符的例子，配合僞類和僞元素完成麪包屑菜單。

6. 加載中...動畫

<!--css-->
.loading:after {
    content: ".";
    animation: loading 2s ease infinite;
}

@keyframes loading {
    33% {
        content: "..";
    }
    66% {
        content: "...";
    }
}

<!--html-->
<p class="loading">加載中 </p>

效果：

animation動畫值含義：

• loading：animation-name，規定須要綁定到選擇器的 keyframe 名稱爲loading。
• 2s：animation-duration，規定完成動畫所花費的時間2秒。
• ease：animation-timing-function，規定動畫的速度曲線，先慢中快後慢。
• infinite：animation-iteration，規定動畫應該播放的次數爲無限次。

經過animation動畫完成33%、66%時與content內容配合，實現動態「加載中...」的效果。

7. 插入圖片

<!--css-->
.loading:before {
    content: url("../static/img/loading.gif");
    vertical-align: middle;
}

<!--html-->
<div class="loading"> 加載中... </div>

效果：

除了插入字體圖標，content還可使用url()方法插入圖片，和background屬性相似可使用url指定一個圖片路徑，不一樣的是content屬性沒法控制圖片大小，使用條件有限。

8. attr屬性內容生成

<!--css-->
.web:after {
    content: "（"attr(href)"）"
}

<!--html-->
<a class="web" href="https://echeverra.cn">echevera</a>

效果：

content值也能夠是attr()方法，用來獲取指定屬性的值，可插入到指定的位置。

9. 半邊特效

<!--css-->
span{
    font-family: sans-serif;
    font-size: 30px;
    font-weight: bold;
    position: relative;
    color: green;
}
span:before{
    content: attr(text);
    color: orange;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
}

<!--html-->
<span text="echeverra">echeverra</span>
<span text="博">博</span>
<span text="客">客</span>

效果：

半邊特效是經過attr()方法獲取text屬性值，屬性值與其內容相同，巧妙的設置絕對定位，只顯示一半並覆蓋了原文本內容，實現文字半邊特效，是否是還挺炫酷的。須要注意的是有些font-family字體會有文字沒法重合的問題。

10. 文字引號

<!--css-->
span {
    quotes: '「' '」';
}
span:before {
    content: open-quote;
}
span:after {
    content: close-quote;
}

<!--html-->
<p>魯迅說過：<span>真正的勇士,勇於直面慘淡的人生,勇於正視淋漓的鮮血。</span></p>

效果：

利用元素的quotes屬性指定雙引號，使用content的open-quote屬性值設置開口引號，close-quote屬性值設置閉合引號，固然quotes也能夠指定其餘符號。

11. 添加章節數

<!--css-->
ul{
    counter-reset: section;
}
li{
    list-style-type: none;
    counter-increment: section;
}
li:before{
    content: counters(section, '-') '.';
}

<!--html-->
<ul>
    <li>章節一</li>
    <li>章節二
        <ul>
            <li>章節二一</li>
            <li>章節二二</li>
            <li>章節二三</li>
        </ul>
    </li>
    <li>章節三</li>
    <li>章節四</li>
    <li>章節五
        <ul>
            <li>章節五一</li>
            <li>章節五二</li>
        </ul>
    </li>
    <li>章節六</li>
</ul>

效果：

這裏用到了counter計數器方法，涉及到counter-reset、counter-increment、counter()和counters()幾個屬性。

• counter-reset用來指定計數器名稱，例子中命名爲section，同時能夠指定計數器開始計數的數值，如指定開始計數數值爲1：counter-reset: section 1;，不指定默認爲0。
• counter-increment用來指定計數器每次遞增的值，如指定計數器遞增值爲2：counter-increment: section 2;，默認值爲1，counter-increment只要指定了counter-reset，對應的計數器的值就會變化。
• counter(name, style)用來輸出計數器的值。其中name爲計數器名稱，style可選參數，默認爲阿拉伯數字，也可指定list-style-type支持的值，如羅馬數字lower-roman。
• counters(name, strings, style)用來處理嵌套計數器，一樣是輸出計數器的值，和counter()不一樣的是多了一個strings參數，表示子序號的鏈接字符串。例如1.1的string就是'.'，1-1就是'-'。

關於計數器的詳細的教程，一樣能夠參考CSS大神張鑫旭的CSS counter計數器(content目錄序號自動遞增)詳解。

12. 計算checkbox選中數

<!--css-->
form {
    counter-reset: count 0;
}

input[type="checkbox"]:checked {
    counter-increment: count 1;
}

.result:after {
    content: counter(count);
}

<!--html-->
<form>
    <input type="checkbox" id="javaScript">
    <label for="javaScript">javaScript</label>
    <input type="checkbox" id="PHP">
    <label for="PHP">PHP</label>
    <input type="checkbox" id="Python">
    <label for="Python">Python</label>

    <div class="result">已選：</div>
</form>

效果：

巧妙運用計數器配合:checked僞類，選中計數器增長1，取消選中減1，用CSS實現動態計數功能。

總結

總結content屬性值能夠爲如下幾種：

• string字符串，最多見的，對應案例：清除浮動、小三角的氣泡窗口、字體圖標、無內容提示、麪包屑菜單、加載中...動畫。
• url()方法，對應案例：插入圖片。
• attr()方法，對應案例：attr屬性內容生成、半邊特效。
• quotes引號，對應案例：文字引號。
• counter()方法，計數器功能，對應案例：添加章節數，計算checkbox選中數。

儘管使用javaScript一樣能夠實現上述的大部分功能，靈活性也更高，但使用CSS的好處就是能夠極大地簡化開發，不佔用JS主線程，提高web的性能。

其實content的案例遠不止於此，在查閱相關資料的同時，我還見識到了另一些神奇的用法，固然原理大體相同，本文的案例只是儘量的帶你瞭解content鮮爲人知的一面，打開一個全新的世界，讓你觸類旁通。若是能在實際開發中運用上，那就更Nice了，但願能對你們有所幫助。

你學「廢」了麼？

---

文章首發於個人博客 https://echeverra.cn，原創文章，轉載請註明出處。 歡迎關注個人微信公衆號，一塊兒學習進步！不定時會有資源和福利相送哦！