本篇重點介紹CSS中的:befor、:after建立的僞元素幾種使用場景,如填充文本、做爲iconfont、進度線、時間線以及幾何圖形。css
CSS中的:befor、:after都會建立一個僞元素,其中:befor建立的僞元素是所選元素的第一個子元素,:after建立的僞元素是所選元素的最後一個子元素。html
:befor、:after建立的僞元素默認樣式爲內聯樣式。web
/* CSS3 */ selector::before /* CSS2 */ selector:before
CSS3引入了 ::(兩個冒號)是用來區分僞類(:一個冒號)和僞元素(::兩個冒號)。canvas
僞類:操做元素自己,如 :hover、:first-child、:focus等等。瀏覽器
僞元素:操做元素的子元素,如 ::before、::after、::content等等。app
在IE8中只支持:(一個冒號),因此爲了兼容這些瀏覽器也能夠使用 :befor、:after。ide
content 屬性表示僞元素填充的內容。字體
CSS:spa
.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頁面:3d
效果:
可替換元素(replaced element):其展示不禁CSS來控制的。這些元素是一類外觀渲染獨立於CSS的對象。
典型的可替換元素有<iframe>、<img>、 <object>、 <video> 以及 表單元素,如<textarea>、 <input> 。
某些元素只在一些特殊狀況下表現爲可替換元素,例如 <audio> 和 <canvas> 。
:befor :after 在此類元素內是不生效的。
IE9版本纔開始徹底支持 :befor :after ,Chrome、Firefox現都已全線支持。
IE | Edge | Firefox | Chrome | Android Chrome |
iOS Safari |
9 | all | 2 | all | all | all |
說明:content屬性支持文本字符。
示例:
說明:content屬性也支持iconfont字體圖表的展現。這也是使用最多的場景。
示例:此示例已引用了阿里iconfont圖標庫
說明::befor :after建立的僞元素能夠以線條方式定位在元素周邊的指定位置上,如進度線和時間線。
說明:經過設置 :befor :after 僞元素的border相關屬性,可建立很是多的幾何圖形;如三角形、多邊形、五角星等等。
說明:默認狀況下,:befor :after 僞元素的border邊框屬性與其餘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; }
效果:
說明:顯示某一方位的border,並隱藏左右2邊的border(背景設置爲透明),可以讓僞元素顯示三角形的形狀。
示例:
MDN ::before:https://developer.mozilla.org/en-US/docs/Web/CSS/::before
MDN ::after:https://developer.mozilla.org/en-US/docs/Web/CSS/::after
::before、::after介紹:https://css-tricks.com/pseudo-element-roundup/
CSS 幾何圖形:https://css-tricks.com/examples/ShapesOfCSS/