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

時間 2019-11-05

標籤 css 選擇器使用插入字符圖片項目編號欄目 CSS 简体版

原文原文鏈接

before: 僞元素選擇器用於在某個元素以前插入一些內容

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="renderer" content="webkit">
    <title>css3</title>
    <style type="text/css">
        .p_before:before {
            content: 'H';
            color: #01B4EE;
        }
        .p_beforeImg {
            background: #eeeeee;
            width: 200px;
            height: 80px;
            border-radius: 6px;
            padding: 10px 20px;
            position: relative;

        }
        .p_beforeImg:before {
            content: '';
            background: url('../img/triangle_up.png') no-repeat top left /32px 16px;/*兼容沒測*/
            position: absolute;
            top: -15px;
            z-index: 2;
            width: 32px;
            height: 16px;
        }
    </style>
</head>
<body>
    <p class="p_before">ello Word（H是經過before添加的文字）</p>
    <p class="p_beforeImg">經過before添加三角尖圖片</p>
</body>
</html>

運行效果html

僞類選擇器:before使用content屬性插入項目編號，項目編號能夠爲數字編號、小寫字母編號、大寫字母編號、羅馬字編號等css3

代碼web

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="renderer" content="webkit">
    <title>css3</title>
    <style type="text/css">
        //counter-increment 屬性設置某個選取器每次出現的計數器增量。默認增量是 1 mycounter爲我指定的計數器名
        .p_before_number>span,.p_before_letter>span {
            counter-increment: mycounter;
            display: block;
        }
        .p_before_number>span:before {
            content: '第'counter(mycounter)'種';
        }
        //upper-alpha爲大寫字母
        //其它的編號類型：list-style-type屬性下面將列出它全部的值
        .p_before_letter>span:before {
            content: counter(mycounter,upper-alpha)'.';
        }
    </style>
</head>
<body>
    <div class="p_before_number">
        <span>蘋果</span>
        <span>香蕉</span>
        <span>芒果</span>
    </div>
    <div class="p_before_letter">
        <span>跑步</span>
        <span>游泳</span>
        <span>登山</span>
    </div>
</body>
</html>

運行效果app

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

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屬性來源w3schoolui

after: 僞元素選擇器用於在某個元素以後插入一些內容

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

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

運行效果spa