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

孫淑建發布于2019-08-02 15:57 / 3480人閱讀

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

before: 偽元素選擇器用于在某個元素之前插入一些內容

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

css3

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

通過before添加三角尖圖片

運行效果

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

代碼

運行效果

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

list-style-type屬性
值                        描述
none                      無標記。
disc                      默認。標記是實心圓。
circle                    標記是空心圓。
square                    標記是實心方塊。
decimal                   標記是數字。
decimal-leading-zero      0開頭的數字標記。(01, 02, 03, 等。)
lower-roman               小寫羅馬數字(i, ii, iii, iv, v, 等。)
upper-roman               大寫羅馬數字(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                    傳統的希伯來編號方式
armenian                  傳統的亞美尼亞編號方式
georgian                  傳統的喬治亞編號方式(an, ban, gan, 等。)
cjk-ideographic           簡單的表意數字
hiragana                  標記是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana                  標記是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha            標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha            標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

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

after: 偽元素選擇器用于在某個元素之后插入一些內容

把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;
    }

運行效果

GPU云服務器云服務器 vi插入字符插入圖片一個符號插入器 ppt插入圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54398.html

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

摘要：小寫羅馬數字等。小寫英文字母等。傳統的希伯來編號方式傳統的亞美尼亞編號方式傳統的喬治亞編號方式等。日文片假名以上屬性來源偽元素選擇器用于在某個元素之后插入一些內容把的地方換成，插入圖片樣式用一下的就行兼容沒測運行效果 before: 偽元素選擇器用于在某個元素之前插入一些內容偽類選擇器:before使用content屬性插入字符、屬性插入圖片 ...

junbaor 2019-08-29 13:09 評論0 收藏0
CSS3的content屬性詳解

摘要：中主要的偽元素有四個，在偽元素選擇器中，有一個屬性，能夠實現頁面中的內容插入。這是鏈接運行結果插入項目編號利用的屬性針對多個項目追加連續編號大標題文字大標題文字大標題文字大標題文字運行結果項目編號修飾默認插入的項目編號是數字型的，。。。 CSS中主要的偽元素有四個：before/after/first-letter/first-line，在before/after偽元素選擇器中，有一個...

RyanHoo 2019-08-28 18:09 評論0 收藏0
css系列之before或after中content

摘要：要配合和屬性使用。，給同級元素增加計數器用于標識自增計數器的作用范圍，為自定義名稱，為起始編號默認為。 **單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素，不過瀏覽器需要同時支持舊的已經存在的偽元素寫法，比如:first-line、:first-letter、:before、:after等，單冒號(:)兼容性更好** content可能的值 div::after{ ...

lieeps 2019-08-30 15:55 評論0 收藏0
CSS魔法堂：一起玩透偽元素和Content屬性

摘要：前言繼上篇魔法堂稍稍深入偽類選擇器記錄完偽類后，我自然而然要向偽元素伸出魔掌的啦。和的注意事項默認必須設置屬性，否則一切都是無用功默認，就是和的內容無法被用戶選中的偽元素和偽類結合使用形如。前言 ?繼上篇《CSS魔法堂：稍稍深入偽類選擇器》記錄完偽類后，我自然而然要向偽元素伸出魔掌的啦^_^。本文講講述偽元素以及功能強大的Contet屬性，讓我們可以通過偽元素更好地實現更多的可能！ ...

DevTalking 2019-08-30 15:54 評論0 收藏0