[技術分享] 好用的偽元素:before和:after

 作者:李東  瀏覽數:

提到偽類估計大家第一個在腦海中想起來的就是:hover,我們經常a標簽上設置。能實現比較炫鼠標交互的效果。其實:hover也能作用于其他元素,例如在div元素上設置就能讓鼠標在經過時候發生改變。可以試下一下。

div{
    width: 50px;
    height: 50px;
    background-color: blue;
}
div:hover{
    background-color: red;
}
div中hover的示例

這個不是今天說的重點,今天要說的是偽類:before:after,關于這倆哥們剛開始的時候我還真是小瞧了他們,后來我還是逐漸重視它們起來。廢話不說國際慣例先來介紹瀏覽器的支持情況。

:before和:after瀏覽器支持情況

所有的瀏覽器都支持,下面來說下它們的作用。:before和:after會在指定的元素內容(而不是元素本身)之前或者之后插入一個包含content屬性指定內容的行內元素,最基本的用法如下:

div:before {
    content: "這里是添加的開頭#####";
    color: red;
}

div:after {
    content: "$$$$$$這里是添加的結尾";
    color: red;
}
:before和:after應用示例

這樣就在div前面和后面添加了我們在content里面設置的東西。需要注意的是content可以為空,即content:""但是不能不設置,否則偽類無效。由于插入的內容默認是一個行內元素,并且在HTML源代碼中無法看到(這就是為什么稱之為偽類的原因),所以也就無法通過DOM對其進行操作。并且偽類元素也會像其他子元素一樣正常繼承父元素的一些CSS屬性,比如字體、顏色等。我們的content里面不只能插入文本,還可以指定其他內容,例如圖片等。

//html code
<p>我是P標簽,由于:before和:after我前后都會有圖片</p>
<a href="https://www.lidongtech.com/" >我是A標簽因為:after我的后面會跟上我的鏈接地址</a>

//CSS code 
p:before,p:after{
    content: url("1.jpg");
}
a:after {
    content: attr(href);
}

很神奇是吧,發揮想象力吧!了解了:before和:after是不是有點要做什么的沖動?它們能應用的地方有很多。例如比較難搞的浮動float,我們都知道如果在一個元素內部的子元素設置了浮動,為了讓子元素能將父元素給“撐”起來,那么必須在父元素的結束標簽前面需要設置清除浮動clear:both;,老辦法就是新建一個div然后引用浮動的類。這樣會多一個毫無意義標簽不說,在javascript操作子元素的時候還會出現莫名的BUG。

目前清除浮動比較流行的做法是:

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
 
.clearfix:after {
    clear:both;
}
 
/* For IE 6/7 */
.clearfix {
    zoom:1;
}

在設置浮動的父元素的上引用.clearfix就能實現清楚浮動,很方便是吧。為什么里面會有display:table;?因為這樣設置的:before和:after會作為塊級表格來顯示(類似),表格前后帶有換行符。這樣就能確保萬無一失了。另外zoom:1;是IE6/7瀏覽器下清除浮動的方式。開下腦洞吧:before和:after還能實現更神器的效果。比較經典的例子就是用偽類實現八卦圖了,下面放出代碼:

#Gossip {
    width: 96px;
    height: 48px;
    background: snow;
    border-color: #444;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
 
#Gossip:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: snow;
    border: 18px solid #444;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
#Gossip:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #444;
    border: 18px solid snow;
    border-radius:100%;
    width: 12px;
    height: 12px;
}
CSS八卦

如果你對截圖有意見的話,我制作了一個DEMO可以看具體的代碼和效果>>>猛戳這里<<<

轉自:李東的技術博客 -《好用的偽元素:before和:after》。本文已得作者授權
原文地址:https://www.lidongtech.com/easy-use-before-and-after.html

相關文章

三期必中一期平特肖