溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“css中:before的定義和用法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css中:before的定義和用法”吧!
:before 偽元素在元素之前添加內容。這個偽元素允許創作人員在元素內容的最前 面插入生成內容。默認地，這個偽元素是行內元素，不過可以使用屬性 display 改變這一點。
:before定義和用法
:before偽元素向選定的元素前插入內容。
:before偽元素生成包含放置在元素中的內容之前的生成內容的偽元素。
使用content屬性來指定要插入的內容。
其中偽元素并不會真實的展現在dom中，它們并不是真正的元素，很多移動設備并不支持，所以在許多關鍵性的地方不建議使用偽元素。
瀏覽器支持情況
IE8+ (6與7弱爆炸了)
chrome2.0+
firefox 3.5+
:before的實例
此樣式會在每個 h2 元素之前播放一段聲音：
h2:before { content:url(beep.wav);}
CSS2 - :before 偽元素
before 偽元素可用于在某個元素之前插入某些內容。
:before 偽元素可以加入任意元素可以是文字、視頻、圖片等
下面的樣式會在標題之前播放音頻：
h2:before{ content:url(beep.wav);}
下面的樣式會在標題之前加入content這個字符串，要注意 content需要用""引號包含起來.
h2:before{content:"content";}
下面的樣式會在h2標題前面加入一張圖片.
h2:before{content:url(XXX.jpg);}
CSS2 - :after 偽元素
after 偽類可用于在某個元素之后插入某些內容。
下面的樣式會在標題之后播放音頻：
h2:after{ content:url(beep.wav);}
到此，相信大家對“css中:before的定義和用法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
