關於僞類元素:before和:after

Posted @2011-11-02 3:02 p.m.javascript

Categories csscss

:before和:after的做用就是在指定的元素內容（而不是元素自己）以前或者以後插入一個包含content屬性指定內容的行內元素，最基本的用法以下：java

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

這段代碼會在#example元素內容以前插入一個'#'，以及在內容以後添加一個'$'，插入的行內元素是做爲#example的子元素，效果以下:瀏覽器

Here is the example content函數

須要注意的是若是沒有content屬性，僞類元素將沒有任何做用。可是能夠指定content爲空，同時正如前面所說，插入的內容默認是一個行內元素，而且在HTML源代碼中沒法看到，這就是爲何稱之爲僞類元素的理由，因此也就沒法經過DOM對其進行操做。post

#example:before {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
}

僞類元素也會像其餘子元素同樣正常繼承父元素的一些CSS屬性，好比字體等。字體

除了插入文字內容，還能夠指定其餘內容：this

p:before {
    content: url('img.jpg');
}
a:after {
    content: attr(href);
}

attr()函數會返回指定元素對應屬性的值url

最後，奉上最惦記的瀏覽器支持狀況spa

Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
Pretty much all mobile browsers.

放在僞類元素裏面的內容通常都只是裝飾性的，因此即使是IE6/7不支持也應該能降級到正常顯示主體內容。

:before和:after的一些驚人用法

>. clearfix hack

若是父元素容器裏面的子元素是浮動元素的話，咱們通常須要在父元素閉合前添加一個clear:both的元素用於清除浮動從而能使父容器正常被子元素內容撐起，可是這種方法引入了多餘的無心義標籤，而且有javascript操做子元素的時候容易引起bug。一種更好的方法是利用CSS，因此在一些CSS文件中常常會看到相似於.clearfix這樣的類出沒，只要在父容器上應用這個類便可實現清除浮動。下面是利用:before和:after的一個實現：(via Nicolas Gallagher)

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}

>. CSS實現的八卦圖案

#yin-yang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}

資源連接