本篇內(nèi)容主要講解“css中:before的定義和用法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css中:before的定義和用法”吧!

成都創(chuàng)新互聯(lián)公司專注于交城企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),成都做商城網(wǎng)站。交城網(wǎng)站建設(shè)公司,為交城等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站設(shè)計，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

:before 偽元素在元素之前添加內(nèi)容。這個偽元素允許創(chuàng)作人員在元素內(nèi)容的最前 面插入生成內(nèi)容。默認(rèn)地，這個偽元素是行內(nèi)元素，不過可以使用屬性 display 改變這一點。

:before定義和用法

:before偽元素向選定的元素前插入內(nèi)容。

:before偽元素生成包含放置在元素中的內(nèi)容之前的生成內(nèi)容的偽元素。

使用content屬性來指定要插入的內(nèi)容。

其中偽元素并不會真實的展現(xiàn)在dom中，它們并不是真正的元素，很多移動設(shè)備并不支持，所以在許多關(guān)鍵性的地方不建議使用偽元素。

瀏覽器支持情況

IE8+ (6與7弱爆炸了)

chrome2.0+

firefox 3.5+

:before的實例

此樣式會在每個 h2 元素之前播放一段聲音：

h2:before { content:url(beep.wav);}

CSS2 - :before 偽元素

before 偽元素可用于在某個元素之前插入某些內(nèi)容。

:before 偽元素可以加入任意元素可以是文字、視頻、圖片等

下面的樣式會在標(biāo)題之前播放音頻：

h2:before{ content:url(beep.wav);}

下面的樣式會在標(biāo)題之前加入content這個字符串，要注意 content需要用""引號包含起來.

h2:before{content:"content";}

下面的樣式會在h2標(biāo)題前面加入一張圖片.

h2:before{content:url(XXX.jpg);}

CSS2 - :after 偽元素

after 偽類可用于在某個元素之后插入某些內(nèi)容。

下面的樣式會在標(biāo)題之后播放音頻：

h2:after{ content:url(beep.wav);}

到此，相信大家對“css中:before的定義和用法”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章名稱：css中:before的定義和用法-創(chuàng)新互聯(lián)
URL分享：http://weahome.cn/article/dhiscg.html