attribut de contenu CSS3

Il existe quatre pseudo-éléments principaux en CSS : avant/après/première lettre/première ligne. Dans le sélecteur de pseudo-éléments avant/après, il existe un attribut de contenu qui peut insérer du contenu dans la page.

Insérer du texte brut

content : "Article inséré" ou content:none n'insère pas de contenu

#html
<h1>这是h1</h1>
<h2>这是h2</h2>
#css
h1::after{
    content:"h1后插入内容"
}
h2::after{
    content:none
}

Les symboles de texte intégrés

peuvent être used La valeur de l'attribut open-quote et la valeur de l'attribut close-quote de l'attribut content ajoutent des symboles de texte imbriqués tels que des crochets, des guillemets simples et des guillemets doubles des deux côtés de la chaîne. les guillemets ouverts sont utilisés pour ajouter le symbole de texte de début et les guillemets fermés sont utilisés pour ajouter le symbole de texte de fin. Modifiez le CSS ci-dessus :

h1{
    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}
h2{
    quotes:"\"" "\"";  /*添加双引号要转义*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

Insérer une image

attribut de contenu Vous pouvez également insérer des images directement avant/après l'élément

#html
<h3>这是h3</h3>

#css
h3::after{
    content:url(图片路径)
}

Insérer la valeur d'attribut du element

L'attribut content peut utiliser directement attr pour obtenir les attributs de l'élément et l'insérer dans la position correspondante.

#html
<a href="http://www.php.cn">这是链接</a>

#css
a:after{
    content:attr(href);
}

Insérer le numéro d'article

Utilisez l'attribut compteur du contenu pour ajouter des numéros consécutifs à plusieurs éléments.

#html
<h1>大标题</h1>
<p>文字</p>
<h1>大标题</h1>
<p>文字</p>
<h1>大标题</h1>
<p>文字</p>
<h1>大标题</h1>
<p>文字</p>

#css
h1:before{
    content:counter(my)&#39;.&#39;;
}
h1{
    counter-increment:my;
}

Modification du numéro d'article

Par défaut Le numéro de projet inséré est numérique, 1,2,3. . . Incrémentation automatique, vous pouvez également ajouter du texte et du style au numéro de projet, toujours utiliser la modification html, css ci-dessus comme suit :

h1:before{
    content:'第'counter(my)'章';
    color:red;
    font-size:42px;
}
h1{
    counter-increment:my;
}

Spécifiez le type de numéro

Utiliser le contenu (nom du compteur , type de numéro) La syntaxe du format spécifie le type de numérotation. La référence au type de numérotation peut être basée sur la valeur de l'attribut list-style-type de ul. En utilisant le code HTML ci-dessus, le CSS est modifié comme suit :

h1:before{
    content:counter(my,upper-alpha);
    color:red;
    font-size:42px;
}
h1{
    counter-increment:my;
}

Imbrication des nombres

Les grands nombres sont imbriqués dans les nombres moyens, et les nombres moyens sont imbriqués dans les petits nombres.

#html
<h1>大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<h1>大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<h1>大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>

#css
h1::before{
    content:counter(h)&#39;.&#39;;
}
h1{
    counter-increment:h;
}
p::before{
    content:counter(p)&#39;.&#39;;
    margin-left:40px;
}
p{
    counter-increment:p;
}

On peut trouver dans le résultat de l'exemple que les nombres de p sont consécutifs. Si vous renumérotez les trois p après chaque h1, vous pouvez utiliser l'attribut counter-reset pour le réinitialiser :

h1{    
    counter-increment:h;    
    counter-reset:p;
}

pour réaliser une imbrication plus complexe, comme trois couches. Imbriqué.

#html
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>

#css
h1::before{
    content:counter(h1)&#39;.&#39;;
}
h1{
    counter-increment:h1;
    counter-reset:h2;
}
h2::before{
    content:counter(h1) &#39;-&#39; counter(h2);
}
h2{
    counter-increment:h2;
    counter-reset:h3;
    margin-left:40px;
}
h3::before{
    content:counter(h1) &#39;-&#39; counter(h2) &#39;-&#39; counter(h3);
}
h3{
    counter-increment:h3;
    margin-left:80px;
}

La DÉMO complète est donnée ci-dessous

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS content</title>
<style>
.string p:after {
    margin-left: -16px;
    background: #fff;
    content: "支持";
    color: #f00;
}

.attr p:after {
    content: attr(title);
}

.url p:before {
    content: url(https://img.php.cn/upload/article/000/000/009/587d87ecca52d563.jpg);
    display: block;
}

.test ol {
    margin: 16px 0;
    padding: 0;
    list-style: none;
}

.counter1 li {
    counter-increment: testname;
}

.counter1 li:before {
    content: counter(testname)":";
    color: #f00;
    font-family: georgia,serif,sans-serif;
}

.counter2 li {
    counter-increment: testname2;
}

.counter2 li:before {
    content: counter(testname2,lower-roman)":";
    color: #f00;
    font-family: georgia,serif,sans-serif;
}

.counter3 ol ol {
    margin: 0 0 0 28px;
}

.counter3 li {
    padding: 2px 0;
    counter-increment: testname3;
}

.counter3 li:before {
    content: counter(testname3,float)":";
    color: #f00;
    font-family: georgia,serif,sans-serif;
}

.counter3 li li {
    counter-increment: testname4;
}

.counter3 li li:before {
    content: counter(testname3,decimal)"."counter(testname4,decimal)":";
}

.counter3 li li li {
    counter-increment: testname5;
}

.counter3 li li li:before {
    content: counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testname5,decimal)":";
}
</style>
</head>
<body>
<ul>
    <li>
        <strong>string：</strong>
        <p>你的浏览器是否支持content属性：否</p>
    </li>
    <li>
        <strong>attr：</strong>
        <p title="如果你看到我则说明你目前使用的浏览器支持content属性"></p>
    </li>
    <li>
        <strong>url()：</strong>
        <p>如果你看到图片则说明你目前使用的浏览器支持content属性</p>
    </li>
    <li>
        <strong>counter(name)：</strong>
        <ol>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ol>
    </li>
    <li>
        <strong>counter(name,list-style-type)：</strong>
        <ol>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ol>
    </li>
    <li>
        <strong>counter(name)拓展应用：</strong>
        <ol>
            <li>列表项
                <ol>
                    <li>列表项
                        <ol>
                            <li>列表项</li>
                            <li>列表项</li>
                        </ol>
                    </li>
                    <li>列表项</li>
                </ol>
            </li>
            <li>列表项
                <ol>
                    <li>列表项</li>
                    <li>列表项</li>
                </ol>
            </li>
            <li>列表项
                <ol>
                    <li>列表项</li>
                    <li>列表项</li>
                </ol>
            </li>
        </ol>
    </li>
</ul>
</body>
</html>