CSS偽類選擇器:before、:after使用：插入字符、插入圖片、插入項(xiàng)目編號

junbaor 發(fā)布于2019-08-29 13:09 / 2545人閱讀

摘要：小寫羅馬數(shù)字等。小寫英文字母等。傳統(tǒng)的希伯來編號方式傳統(tǒng)的亞美尼亞編號方式傳統(tǒng)的喬治亞編號方式等。日文片假名以上屬性來源偽元素選擇器用于在某個(gè)元素之后插入一些內(nèi)容把的地方換成，插入圖片樣式用一下的就行兼容沒測運(yùn)行效果

before: 偽元素選擇器用于在某個(gè)元素之前插入一些內(nèi)容

偽類選擇器:before使用content屬性插入字符、屬性插入圖片

css3

ello Word（H是通過before添加的文字）

通過before添加三角尖圖片

運(yùn)行效果

偽類選擇器:before使用content屬性插入項(xiàng)目編號，項(xiàng)目編號可以為數(shù)字編號、小寫字母編號、大寫字母編號、羅馬字編號等

代碼

運(yùn)行效果

第1種蘋果
第2種香蕉
第3種芒果
A.跑步
B.游泳
C.爬山

list-style-type屬性
值                        描述
none                      無標(biāo)記。
disc                      默認(rèn)。標(biāo)記是實(shí)心圓。
circle                    標(biāo)記是空心圓。
square                    標(biāo)記是實(shí)心方塊。
decimal                   標(biāo)記是數(shù)字。
decimal-leading-zero      0開頭的數(shù)字標(biāo)記。(01, 02, 03, 等。)
lower-roman               小寫羅馬數(shù)字(i, ii, iii, iv, v, 等。)
upper-roman               大寫羅馬數(shù)字(I, II, III, IV, V, 等。)
lower-alpha               小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha               大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek               小寫希臘字母(alpha, beta, gamma, 等。)
lower-latin               小寫拉丁字母(a, b, c, d, e, 等。)
upper-latin               大寫拉丁字母(A, B, C, D, E, 等。)
hebrew                    傳統(tǒng)的希伯來編號方式
armenian                  傳統(tǒng)的亞美尼亞編號方式
georgian                  傳統(tǒng)的喬治亞編號方式(an, ban, gan, 等。)
cjk-ideographic           簡單的表意數(shù)字
hiragana                  標(biāo)記是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana                  標(biāo)記是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha            標(biāo)記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha            標(biāo)記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

以上list-style-type屬性來源w3school

after: 偽元素選擇器用于在某個(gè)元素之后插入一些內(nèi)容

把before的地方換成after，插入圖片樣式用一下的就行

    .p_after:after {
        content: "d";
        color: #01B4EE;
    }
    .p_afterImg {
        background: #eeeeee;
        width: 200px;
        height: 80px;
        border-radius: 6px;
        padding: 10px 20px;
        position: relative;

    }
    .p_afterImg:after {
        content: "";
        background: url("../img/triangle_down.png") no-repeat bottom right /32px 16px;/*兼容沒測*/
        position: absolute;
        bottom: -15px;
        z-index: 2;
        width: 32px;
        height: 16px;
    }

運(yùn)行效果