前言
本文講解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了,希望能對大家有所幫助。
你學“廢”了麼?
文章首發於我的部落格 echeverra.cn/css-content,原創文章,轉載請註明出處。
歡迎關注我的微信公眾號 echeverra,一起學習進步!不定時會有資源和福利相送哦!
本作品採用《CC 協議》,轉載必須註明作者和本文連結