首頁  >  文章  >  web前端  >  CSS中befor 、after偽元素的用法

CSS中befor 、after偽元素的用法

小云云
小云云原創
2018-02-09 11:30:513868瀏覽

本文主要和大家介紹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的物件。

典型的可替換元素有