CSS :befor :after 偽元素的巧妙用法

發(fā)布時(shí)間：2018-02-07 14:09:48 作者：佚名

我要評(píng)論

本篇重點(diǎn)介紹CSS中的:befor、:after創(chuàng)建的偽元素幾種使用場景，如填充文本、作為iconfont、進(jìn)度線、時(shí)間線以及幾何圖形，感興趣的朋友一起看看吧

本篇重點(diǎn)介紹CSS中的:befor、:after創(chuàng)建的偽元素幾種使用場景，如填充文本、作為iconfont、進(jìn)度線、時(shí)間線以及幾何圖形。

1. 介紹

1.1 說明

CSS中的:befor、:after都會(huì)創(chuàng)建一個(gè)偽元素，其中:befor創(chuàng)建的偽元素是所選元素的第一個(gè)子元素，:after創(chuàng)建的偽元素是所選元素的最后一個(gè)子元素。

:befor、:after創(chuàng)建的偽元素默認(rèn)樣式為內(nèi)聯(lián)樣式。

1.2 語法

/* CSS3 */
selector::before
/* CSS2 */
selector:before

CSS3引入了 ::（兩個(gè)冒號(hào)）是用來區(qū)分偽類(:一個(gè)冒號(hào))和偽元素(::兩個(gè)冒號(hào))。

偽類：操作元素本身，如 :hover、:first-child、:focus等等。

偽元素：操作元素的子元素，如 ::before、::after、::content等等。

在IE8中只支持:(一個(gè)冒號(hào))，所以為了兼容這些瀏覽器也可以使用 :befor、:after。

1.3 content屬性

content 屬性表示偽元素填充的內(nèi)容。

示例

CSS：

.test-div {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    background-color: #eee;
}
.test-div::before {
    content: "♥";
    color: red;
}
.test-div::after {
    content: "♥";
    color: blue;
}

HTML頁面：

效果：

1.4 可替換元素

可替換元素（replaced element）：其展現(xiàn)不由CSS來控制的。這些元素是一類外觀渲染獨(dú)立于CSS的對(duì)象。

典型的可替換元素有<iframe>、<img>、 <object>、 <video> 以及表單元素，如<textarea>、 <input> 。

某些元素只在一些特殊情況下表現(xiàn)為可替換元素，例如 <audio> 和 <canvas> 。

:befor :after 在此類元素內(nèi)是不生效的。

1.5 瀏覽器支持情況

IE9版本才開始完全支持 :befor :after ，Chrome、Firefox現(xiàn)都已全線支持。

IE Edge Firefox Chrome Android 
Chrome iOS 
Safari
9 all 2 all all  all

2. 應(yīng)用場景

2.1 支持文本字符

說明：content屬性支持文本字符。

示例：

2.2 支持iconfont

說明：content屬性也支持iconfont字體圖表的展示。這也是使用最多的場景。

示例：此示例已引用了阿里iconfont圖標(biāo)庫

2.3 進(jìn)度線與時(shí)間線

說明：:befor :after創(chuàng)建的偽元素可以以線條方式定位在元素周邊的指定位置上，如進(jìn)度線和時(shí)間線。

1) 進(jìn)度線

2) 時(shí)間線

2.4 幾何圖形

說明：通過設(shè)置 :befor :after 偽元素的border相關(guān)屬性，可創(chuàng)建非常多的幾何圖形；如三角形、多邊形、五角星等等。

1) 矩形

說明：默認(rèn)情況下，:befor :after 偽元素的border邊框?qū)傩耘c其他HTML元素一樣。

CSS：

div::before {
    width: 0px;
    height: 0px;
    content: '';
    position: absolute;
    border-top: 50px solid #f50000;
    border-right: 50px solid #6cc361;
    border-bottom: 50px solid #6167c3;
    border-left: 50px solid #fa00d9;
}

效果：