CSS中befor 、after偽元素的用法
- 小云云原創
- 2018-02-09 11:30:513930瀏覽
本文主要和大家介紹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頁面：
效果：
