詳解css3中的偽類before和after常見用法

發(fā)布時間：2020-11-17 15:11:36 作者：sunsineq

這篇文章主要介紹了詳解css3中的偽類before和after常見用法,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

before/after偽類相當(dāng)于在元素內(nèi)部插入兩個額外的標簽，其最適合也是最推薦的應(yīng)用就是圖形生成。在一些精致的UI實現(xiàn)上，可以簡化HTML代碼，提高可讀性和可維護性。國外這兩個偽類應(yīng)用相當(dāng)?shù)钠占耙约芭d盛，不過貌似我們這邊前端er們普遍缺乏使用這兩個偽類的意識，要使用頂多也就是跟風(fēng)的“清除浮動”應(yīng)用。

1.基本用法

:before和:after的作用就是在指定的元素內(nèi)容（而不是元素本身）之前或者之后插入一個包含content屬性指定內(nèi)容的行內(nèi)元素，最基本的用法如下：

#example:before {
    content: "#";
    color: red;
}
 
#example:after {
    content: "$";
    color: red;
}

這兩個偽類都屬于內(nèi)聯(lián)元素，但是用display:block；屬性可以將其轉(zhuǎn)換成塊狀元素，比較常見的用法就是樣式的一些實現(xiàn)，還有就是清除浮動的效果。。

2.樣式修改

代碼如下所示:

<div class="quote">
    <span>小戶型</span>
</div>
.quote:before,.quote:after{//用這兩個偽類實現(xiàn)樣式渲染
     content:"";
     display:inline-block;
     width:5%;
     margin:5px 1%;
     border-bottom:1px solid blue;
}

實現(xiàn)效果如下圖所示：

這里寫圖片描述

3.清除浮動

代碼如下所示：

<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;
}

因為浮動的問題，實現(xiàn)效果如下所示：

這里寫圖片描述

如果在上面代碼中加上這段代碼用來清除浮動則會達到不一樣的效果：

.parent:after{
     content:"";
     display:block;//設(shè)為塊狀元素
     clear:both;   //用這個屬性來清除浮動
}

達到的效果如下圖所示:

這里寫圖片描述

到此這篇關(guān)于詳解css3中的偽類before和after常見用法的文章就介紹到這了,更多相關(guān)css3偽類before和after內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

Tag：CSS3 偽類 before After

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解css3中的偽類before和after常見用法

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容