Une introduction détaillée à l'attribut content de CSS3

Il y a quatre pseudo-éléments principaux en CSS : before/after/first-letter/first-line Dans le sélecteur d'élément pseudo-avant/après , il y a un. content Les attributs peuvent être utilisés pour 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 caractères simples, etc. des deux côtés de la chaîne Symboles de texte imbriqués tels que les guillemets et les guillemets doubles. 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)'.';
}
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 la liste. -style-type valeur de l'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)'.';
}
h1{
    counter-increment:h;
}
p::before{
    content:counter(p)'.';
    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. Maintenant, jetez un œil aux résultats : https://jsfiddle.net/dwqs/hfutu4Lq/

Vous pouvez également réaliser 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)'.';
}
h1{
    counter-increment:h1;
    counter-reset:h2;
}
h2::before{
    content:counter(h1) '-' counter(h2);
}
h2{
    counter-increment:h2;
    counter-reset:h3;
    margin-left:40px;
}
h3::before{
    content:counter(h1) '-' counter(h2) '-' counter(h3);
}
h3{
    counter-increment:h3;
    margin-left:80px;

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!