CSS偽元素 CSS:before CSS偽元素(Pseudo Element):after與:before
發(fā)布時間：2011-12-04 00:07:29 作者：佚名 
我要評論
我要評論before 偽元素在元素之前添加內(nèi)容
:before 偽元素在元素之前添加內(nèi)容.
此樣式會在每個 h2元素之前播放一段聲音：
h2:before
{
content:url(beep.mp3);
}
如果已規(guī)定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）才支持 content 屬性。
CSS偽元素(Pseudo Element):after與:before
估計大家很少用到這些 ，但是在技術(shù)飛速發(fā)展的現(xiàn)在，我覺得我們不能整天把時間浪費(fèi)在兼容IE6上！
先看一下:after與:before甚模樣：
HTML中只有一個P標(biāo)簽,P里面有一行文字:
<p>
一行測試文字
</p>
CSS中的設(shè)置：
p:before,p:after{
content:"$$";
}
效果如圖所示：
p:before,p:after{
content:url(Gravatar.jpg);
}
此樣式會在每個 h2元素之前播放一段聲音：
復(fù)制代碼
代碼如下:h2:before
{
content:url(beep.mp3);
}
如果已規(guī)定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）才支持 content 屬性。
CSS偽元素(Pseudo Element):after與:before
估計大家很少用到這些 ，但是在技術(shù)飛速發(fā)展的現(xiàn)在，我覺得我們不能整天把時間浪費(fèi)在兼容IE6上！
先看一下:after與:before甚模樣：
HTML中只有一個P標(biāo)簽,P里面有一行文字:
<p>
一行測試文字
</p>
CSS中的設(shè)置：
復(fù)制代碼
代碼如下:p:before,p:after{
content:"$$";
}
效果如圖所示：
除了文字可以跟內(nèi)容發(fā)生關(guān)系外，圖片也可以哦：
復(fù)制代碼
代碼如下:p:before,p:after{
content:url(Gravatar.jpg);
}
怎么樣，到了這里，你是不是有什么想說的或者想做的呢？可不可以用這個方法來試試以前的float定位排版的方法呢？或者用它來做一些更高級的東西呢？
例如，我現(xiàn)在想在網(wǎng)頁中實現(xiàn)如下圖所示的排版，就可以用這種方法。
我們可以content的很多屬性，如display、position、background……，您是否想到了呢？
另外，利用:after、:before還可以實現(xiàn)多背景變幻的效果哦，動手做做吧，我想這應(yīng)該會讓你興奮一會兒的，哈哈！
相關(guān)文章
- before 和 after其實就是附著在元素前后的偽元素，說他是偽元素的意思就是，元素不是在DOM中生成的，而是在瀏覽器渲染引擎渲染CSS的時候畫上去的，這篇文章主要給大家介紹2017-09-18
那些你所不知的CSS ::before 和::after 偽元素用法
下面小編就為大家?guī)硪黄切┠闼恢腃SS ::before 和::after 偽元素用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-12- :before和:after偽元素在CSS中除了被用來添加元素、加小標(biāo)、清浮動等,還有很多妙用之處,接下來我們就來看一兩個CSS中:before和:after偽元素使用的奇技淫巧2016-05-20
- 這篇文章主要介紹了CSS中的before和:after偽元素使用詳解,包括對一些非文本內(nèi)容的插入操作使用,需要的朋友可以參考下2015-05-27
CSS偽元素 :before, :after, box-shadow應(yīng)用
利用CSS偽元素 ：before 和 ：after 可以在文檔前后插入內(nèi)容而不改變文檔原有結(jié)構(gòu)，下面有個不錯的示例，大家可以參考下2014-03-04CSS偽元素before、after設(shè)置特殊效果:制作時尚焦點圖相框
在css選擇器中有這樣子的寫法div:before、div:after，對于before、after來說有部分人是相當(dāng)陌生的,那么這兩個標(biāo)簽是什么呢？有什么用處？本文將詳細(xì)介紹，需要的朋友可以參2012-12-12
本篇重點介紹CSS中的:befor、:after創(chuàng)建的偽元素幾種使用場景，如填充文本、作為iconfont、進(jìn)度線、時間線以及幾何圖形，感興趣的朋友一起看看吧2018-02-07
