本文主要和大家介紹CSS中的:befor、:after創建的偽元素幾個使用場景,如填充文本、作為iconfont、進度線、時間軸以及幾何圖形,希望能幫助到大家。
1. 介紹
1.1 說明
CSS中的:befor、:after都會建立一個偽元素,其中:befor建立的偽元素是所選元素的第一個子元素,:after建立的偽元素是所選元素的最後一個子元素。
:befor、:after建立的偽元素預設樣式為內聯樣式。
1.2 語法
/* CSS3 */ selector::before /* CSS2 */ selector:before
CSS3引入了 ::(兩個冒號)是用來區分偽類(:一個冒號)和偽元素(::兩個冒號)。
偽類別:操作元素本身,如 :hover、:first-child、:focus等等。
偽元素:操作元素的子元素,如 ::before、::after、::content等等。
在IE8中只支援:(一個冒號),所以為了相容這些瀏覽器也可以使用 :befor、:after。
1.3 content屬性
content 屬性表示偽元素填滿的內容。
範例
CSS:
.test-p { width: 100px; height: 100px; margin-left: 20px; background-color: #eee; } .test-p::before { content: "♥"; color: red; } .test-p::after { content: "♥"; color: blue; }
HTML頁面:
效果:
##1.4 可替換元素可替換元素(replaced element):其展現不由CSS來控制的。這些元素是一類外觀渲染獨立於CSS的物件。 典型的可替換元素有