詳解css3中的偽類(lèi)before和after常見(jiàn)用法
我要評(píng)論before/after偽類(lèi)相當(dāng)于在元素內(nèi)部插入兩個(gè)額外的標(biāo)簽，其最適合也是最推薦的應(yīng)用就是圖形生成。在一些精致的UI實(shí)現(xiàn)上，可以簡(jiǎn)化HTML代碼，提高可讀性和可維護(hù)性。國(guó)外這兩個(gè)偽類(lèi)應(yīng)用相當(dāng)?shù)钠占耙约芭d盛，不過(guò)貌似我們這邊前端er們普遍缺乏使用這兩個(gè)偽類(lèi)的意識(shí)，要使用頂多也就是跟風(fēng)的“清除浮動(dòng)”應(yīng)用。
1.基本用法
:before和:after的作用就是在指定的元素內(nèi)容（而不是元素本身）之前或者之后插入一個(gè)包含content屬性指定內(nèi)容的行內(nèi)元素，最基本的用法如下：
#example:before {
content: "#";
color: red;
}
#example:after {
content: "$";
color: red;
}
這兩個(gè)偽類(lèi)都屬于內(nèi)聯(lián)元素，但是用display:block；屬性可以將其轉(zhuǎn)換成塊狀元素，比較常見(jiàn)的用法就是樣式的一些實(shí)現(xiàn)，還有就是清除浮動(dòng)的效果。。
2.樣式修改
代碼如下所示:
<div class="quote">
<span>小戶型</span>
</div>
.quote:before,.quote:after{//用這兩個(gè)偽類(lèi)實(shí)現(xiàn)樣式渲染
content:"";
display:inline-block;
width:5%;
margin:5px 1%;
border-bottom:1px solid blue;
}
實(shí)現(xiàn)效果如下圖所示：
3.清除浮動(dòng)
代碼如下所示：
<div class="parent">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="parent2">parent2</div>
//css代碼
.box1{
width:300px;
height:200px;
background-color: lightgray;
float:left;
}
.box2{
width:300px;
height:100px;
background-color: lightblue;
float:left;
}
.parent2{
width:400px;
height: 400px;
background-color:blue;
color:#fff;
text-align:center;
line-height:400px;
font-size:30px;
}
因?yàn)楦?dòng)的問(wèn)題，實(shí)現(xiàn)效果如下所示：
如果在上面代碼中加上這段代碼用來(lái)清除浮動(dòng)則會(huì)達(dá)到不一樣的效果：
.parent:after{
content:"";
display:block;//設(shè)為塊狀元素
clear:both; //用這個(gè)屬性來(lái)清除浮動(dòng)
}
達(dá)到的效果如下圖所示:
到此這篇關(guān)于詳解css3中的偽類(lèi)before和after常見(jiàn)用法的文章就介紹到這了,更多相關(guān)css3偽類(lèi)before和after內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS偽類(lèi):empty讓我眼前一亮(實(shí)例代碼)
這篇文章主要介紹了CSS偽類(lèi):empty讓我眼前一亮，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-03
這篇文章主要介紹了淺談CSS 偽元素&偽類(lèi)的妙用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2020-09-01
這篇文章主要介紹了CSS 偽類(lèi)修改input選中樣式的示例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-21
css偽類(lèi) 右下角點(diǎn)擊出現(xiàn) 對(duì)號(hào)角標(biāo)表示選中的示例代碼
這篇文章主要介紹了css偽類(lèi) 右下角點(diǎn)擊出現(xiàn) 對(duì)號(hào)角標(biāo)表示選中，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-22css選擇器四大類(lèi)：基本、組合、屬性、偽類(lèi)
這篇文章主要介紹了css選擇器四大類(lèi)：基本、組合、屬性、偽類(lèi)的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-14
詳解如何使用CSS3中的結(jié)構(gòu)偽類(lèi)選擇器和偽元素選擇器
這篇文章主要介紹了詳解如何使用CSS3中的結(jié)構(gòu)偽類(lèi)選擇器和偽元素選擇器，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面2020-01-06
解決移動(dòng)端跳轉(zhuǎn)問(wèn)題(CSS過(guò)渡、target偽類(lèi))
這篇文章主要介紹了解決移動(dòng)端跳轉(zhuǎn)問(wèn)題(CSS過(guò)渡、target偽類(lèi))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編2019-10-10
css3 偽類(lèi)選擇器快速?gòu)?fù)習(xí)小結(jié)
如果說(shuō) css 作為前端開(kāi)發(fā)的基本功, 那么 "選擇器" 就是基礎(chǔ)中的基礎(chǔ)，本文介紹了css3 偽類(lèi)選擇器快速?gòu)?fù)習(xí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工2019-09-10CSS新增的:where和:is偽類(lèi)函數(shù)是什么
這篇文章主要介紹了CSS新增的:where和:is偽類(lèi)函數(shù)是什么的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-15
