Explication détaillée de l'attribut content en 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
}

Résultat d'exécution : https://jsfiddle.net/ dwqs/Lmm1r08x/

Symboles de texte intégrés

Vous pouvez utiliser la valeur d'attribut de guillemet ouvert et la valeur d'attribut de guillemet fermant de l'attribut de contenu pour ajouter des crochets, des guillemets simples, des guillemets doubles, etc. des deux côtés de la chaîne de symboles textuels imbriqués. 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. Modifier 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;
}

Résultat d'exécution : https://jsfiddle.net/dwqs/p8e3qvv4/

Insérer une image

L'attribut content peut également être directement placé sur l'élément Insérer des images avant/après

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

#css
h3::after{
    content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}

Exécuter les résultats : https://jsfiddle.net/dwqs/c6qk6pkv/

Insérer la valeur d'attribut de l'élément

L'attribut content peut être directement Utilisez attr pour obtenir l'attribut de l'élément et l'insérer dans la position correspondante.

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

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

Exécuter les résultats : https://jsfiddle.net/dwqs/m220nzan/

Insérer le numéro d'élément

Utilisez l'attribut counter du contenu pour ajouter des éléments consécutifs à Numéro d'éléments multiples.

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

Résultat d'exécution : https://jsfiddle.net/dwqs/2ueLg3uj/

Modification du numéro de projet

Le numéro de projet inséré par défaut est numérique, 1,2,3.. . . Incrémentation automatique, vous pouvez également ajouter du texte et des styles au numéro de projet. Utilisez toujours la modification HTML et CSS ci-dessus comme suit :

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

Résultats en cours : https://jsfiddle.net/dwqs/17hqznca/.

Spécifiez le type de numérotation

Utilisez la syntaxe du format de contenu (nom du compteur, type de numérotation) pour spécifier le type de numérotation. La référence du type de numérotation peut être basée sur le type de style de liste. valeur d'attribut de ul. En utilisant le 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;
}

Résultats d'exécution : https://jsfiddle.net/dwqs/4nsrtxup/

Imbrication de numéros

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

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

Résultat d'exécution : https://jsfiddle.net/dwqs/2k5qbz51/

On peut trouver dans la sortie 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 et modifier le css du h1 ci-dessus :

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

De cette façon, la numérotation sera réinitialisée. un aperçu du résultat : https://jsfiddle.net/dwqs/hfutu4Lq/

Vous pouvez également implémenter une imbrication plus complexe, comme une imbrication à trois niveaux.

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

Résultats d'exécution : https://jsfiddle.net/dwqs/wuuckquy/

Zhang Dada a un article sur l'utilisation du compteur pour implémenter le comptage : petit conseil : pseudo-classe du compteur CSS pour mettre en œuvre des valeurs numériques Calcul et présentation dynamiques

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!