Explication détaillée de l'utilisation des pseudo éléments ::before et ::after en CSS3

avant et après sont en fait des pseudo-éléments attachés avant et après les éléments. Ce qu'ils veulent dire en disant qu'ils sont des pseudo-éléments, c'est que les éléments ne sont pas générés dans le DOM, mais sont dessinés lorsque le moteur de rendu du navigateur rend ceci. article Cet article vous présente principalement l'utilisation des pseudo-éléments ::before et ::after dans CSS3. Les amis qui en ont besoin peuvent s'y référer.

Avant-propos

Comme nous le savons tous, les deux pseudo-éléments ::before et ::after sont en réalité du contenu en CSS3, mais en fait en CSS2 Il y a déjà ces deux-là, mais en CSS2 ils sont représentés par deux points devant (:before et :after). Aujourd'hui, je vais principalement parler de la façon d'utiliser ces deux pseudo-éléments.

1. Vous pouvez y ajouter des styles tout comme les éléments ordinaires

Par exemple, si je souhaite ajouter une icône devant le texte, si j'utilise ordinaire Lorsque j'écris des éléments, je peux écrire comme ceci :

/*CSS*/
.del{ font-size: 20px;}
.del i{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; 
        background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}

/*HTML*/
<p class="del"><i></i><span>删除</span></p>

Mais j'ai toujours l'impression inconfortable de mettre une balise i vide. Supprimez-la !

/*CSS*/
.del{ font-size: 20px;}
.del::before{ content: ""; display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; 
        background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}

/*HTML*/
<p class="del"><span>删除</span></p>

Ici, le pseudo-élément ::before est utilisé directement pour remplacer la balise i vide. deux ont le même effet. :

En profitant également de cela, nous pouvons utiliser le pseudo-élément ::after pour résoudre le problème classique de la suppression des flotteurs :

.clearfix::after{ display: block; clear:both; content:""; overflow:hidden; height:0>
Bien sûr, si votre site Web doit toujours être compatible avec IE8, utilisez :after, ::after n’est pas compatible.

2. Insérer du texte dans des éléments

Parfois, je dois ajouter le même texte à plusieurs éléments en même temps, afin que vous puissiez pensez à utiliser ces deux pseudo-éléments. Par exemple :

/*CSS*/
.up:after{ content: '↑'; color: #f00;}
.down:after{ content: '↓'; color: #0f0;}

/*HTML*/
<p class="up">上升</p>
<p class="down">下降</p>

L'effet est le suivant :

3. Insérer des images dans des éléments

Pour obtenir un effet d'image et de texte similaire au premier exemple de cet article, vous pouvez également utiliser des pseudo-éléments pour insérer directement des images sans Vous devez utiliser une image de fond, comme ceci :

/*CSS*/
.del{ font-size: 20px;}
.del::before{ content: url("imgs/delete.png"); display: inline-block; margin-right: 2px; vertical-align: middle; }
.del span{ vertical-align: middle;}

Cependant, il est important de noter que l'image insérée de cette manière ne peut pas être contrôlé par la taille du pseudo élément. Pour changer la taille de l'image, vous ne pouvez introduire qu'une image de taille fixe (c'est un peu délicat...), donc je pense personnellement qu'il vaut mieux utiliser une image de fond pratique. .

4. Insérer des numéros de projet consécutifs

Peut-être me direz-vous, n'est-il pas facile d'ajouter des numéros de projet consécutifs ? Utilisez simplement la liste ordonnée directement !

Oui, c'est bel et bien possible, juste comme ça :

<p>我的爱好：</p>
<ol>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ol>

C'est l'effet sous Chrome :

Ça a l'air bien, pas de problème. Et si je veux mettre en gras le numéro de série précédent ? J'étais confus...

À ce moment-là, vous avez dit, ne puis-je pas simplement ajouter manuellement des étiquettes et des chiffres avant chaque texte, puis ajouter des styles aux étiquettes ?

/*CSS*/
ul li{ list-style: none;}
ul li span{ font-weight: bold;}

/*HTML*/
<p>我的爱好：</p>
<ul>
    <li><span>1.</span>吃饭</li>
    <li><span>2.</span>睡觉</li>
    <li><span>3.</span>打豆豆</li>
</ul>

Oui, il est trois heures maintenant. Et s'il était trente ou trois cents ? Les ajouter un par un ? (Très bête et naïf...)

Si vous utilisez du CSS pur en ce moment, vous devez utiliser des pseudo éléments :

/*CSS*/
ul li{ list-style: none; counter-increment: number;}   //number相当于是个变量，随便取名就好，在伪元素中调用
ul li::before{ content: counter(number)"."; font-weight: bold;}  //注意这里不同于JS，counter(number)与"."之间不需要加任何东西，直接连接就好

/*HTML*/
<p>我的爱好：</p>
<ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ul>

L'effet est le suivant :

Donc, si je ne veux pas de chiffres arabes, puis-je utiliser des chiffres chinois à la place ?

Oui ! Les pseudo-éléments sont sympas et puissants !

ul li{ list-style: none; counter-increment: number;}  
ul li::before{ content: counter(number,cjk-ideographic)"、"; font-weight: bold;}

L'effet est le suivant :

En plus de ce cjk-idéographique, vous pouvez également utilisez plus d'attribut CSS list-style-type : (collez directement le tableau dans w3cshool)

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!