CSSコンテンツ属性の具体的な使用法

<スタイル>
    *{マージン: 0;パディング: 0;ボックスサイズ: ボーダーボックス;}
    li{リストスタイル: なし;}
    。コンテンツ{
        位置: 相対;パディング: 10px;
        境界線: 1px 実線 #666;余白: 10px;
    }
    .content.only-text::before{
        内容: '純粋な文字を挿入';
    }
</スタイル>

<本文>
    <h1>1. 純粋な文字を挿入する</h1>
    <div class="コンテンツのみテキスト"></div>
</本文>

<スタイル>
    *{マージン: 0;パディング: 0;ボックスサイズ: ボーダーボックス;}
    li{リストスタイル: なし;}
    。コンテンツ{
        位置: 相対;パディング: 10px;
        境界線: 1px 実線 #666;余白: 10px;
    }
    .content.fill-image::before{
        コンテンツ: url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png');
    }
</スタイル>

<本文>
    <h1>2. 画像を挿入する</h1>
    <div class="content fill-image"></div>
</本文>

<スタイル>
    *{マージン: 0;パディング: 0;ボックスサイズ: ボーダーボックス;}
    li{リストスタイル: なし;}
    。コンテンツ{
        位置: 相対;パディング: 10px;
        境界線: 1px 実線 #666;余白: 10px;
    }
    .content.fill-dom-attr::before{
        コンテンツ: attr(データタイトル);
    }
</スタイル>

<本文>
    <h1>3. 要素属性を挿入する</h1>
    <div class="content fill-dom-attr" data-title="私は .fill-dom-attr 要素の data-title 属性値です"></div>
</本文>

<スタイル>
    *{マージン: 0;パディング: 0;ボックスサイズ: ボーダーボックス;}
    li{リストスタイル: なし;}
    。コンテンツ{
        位置: 相対;パディング: 10px;
        境界線: 1px 実線 #666;余白: 10px;
    }
    .fill-dom-index li{
        位置: 相対的;
        /* カウンターに名前を付けます。li タグのインデックスのみが追加されます。li 要素の中央にある div は考慮されません */
        カウンター増分: my;
    }
    .fill-dom-index li div::before{
        /* 指定された名前の計算機を使用する */
        コンテンツ: counter(my)'- ';
        色: #f00;
        フォントの太さ: 600;
    }
</スタイル>

<本文>
    <h1>4. 現在の要素番号（つまり、現在の要素インデックス）を挿入します</h1>
    <div class="content fill-dom-index">
        <ul>
            <li><div>私は最初の li タグです</div></li>
            <div>私はliタグの最初のdivタグです</div>
            <li><div>私は2番目のliタグです</div></li>
            <li><div>私は3番目のliタグです</div></li>
            <div>私はliタグ内の2番目のdivタグです</div>
            <li><div>私は4番目のliタグです</div></li>
            <li><div>私は5番目のliタグです</div></li>
        </ul>
    </div>
</本文>

<スタイル>
    *{マージン: 0;パディング: 0;ボックスサイズ: ボーダーボックス;}
    li{リストスタイル: なし;}
    。コンテンツ{
        位置: 相対;パディング: 10px;
        境界線: 1px 実線 #666;余白: 10px;
    }
    .fill-dom-index2 li{
        位置: 相対的;
        カウンター増分: my2;
    }
    .fill-dom-index2 li div::before{
        /* 2 番目のパラメータは list-style-type です。使用可能な値は次のとおりです: http://www.w3school.com.cn/cssref/pr_list-style-type.asp*/
        内容: counter(my2,lower-latin)'- ';
        色: #f00;
        フォントの太さ: 600;
    }
</スタイル>

<本文>
    <h1>5. 現在の要素番号を挿入します（タイプを指定します）</h1>
    <div class="content fill-dom-index2">
        <ul>
            <li><div>私は最初の li タグです</div></li>
            <div>私はliタグの最初のdivタグです</div>
            <li><div>私は2番目のliタグです</div></li>
            <li><div>私は3番目のliタグです</div></li>
            <div>私はliタグ内の2番目のdivタグです</div>
            <li><div>私は4番目のliタグです</div></li>
            <li><div>私は5番目のliタグです</div></li>
        </ul>
    </div>
</本文>