Tutoriel sur l'utilisation des pseudo-éléments ::before et ::after

Les deux pseudo-éléments

::before et ::after sont en réalité du contenu en CSS3. Cependant, ils sont déjà présents en CSS2, mais en CSS2 ils sont représentés par un 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 veux ajouter une icône devant le texte, si je l'écris avec des éléments ordinaires, je peux écrire comme ça :

/*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*/
<div class="del"><i></i><span>删除</span></div>

Mais c'est toujours inconfortable de laisser un i tag vide, alors supprimez-le simplement !

/*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*/
<div class="del"><span>删除</span></div>

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

Utilisé de la même manière À cet égard, nous pouvons utiliser le pseudo-élément ::after pour résoudre le problème classique de la suppression des flottants :

.clearfix::after{ display:block; clear:both; content:""; overflow:hidden; height:0; }

Bien sûr, si votre site Web doit toujours être compatible avec IE8 , puis utilisez :after, car ::after n'est pas compatible.

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

Parfois, je peux avoir besoin d'ajouter le même texte à plusieurs éléments en même temps, vous pouvez donc envisager d'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érez une image dans l'élément

pour obtenir quelque chose de similaire à celui de cet article. Dans un exemple d'ajout d'effets de texte à des images, vous pouvez également utiliser des pseudo-éléments pour insérer des images directement sans utiliser d'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;}

Mais il est important de noter que lors d'une insertion de cette manière, la taille de l'image ne peut pas être modifiée en contrôlant la taille du pseudo-élément, elle ne peut introduire qu'une image de taille fixe (c'est un peu déroutant...), donc. Personnellement, je pense qu’il est préférable d’utiliser une image de fond honnête et pratique.

4. Insérez 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, comme ceci :

<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, que se passe-t-il 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, mais que je veux utiliser des chiffres chinois, est-ce que ça va ?

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 cela cjk-ideographic, vous pouvez également utiliser davantage d'attributs de type style de liste dans CSS : (Coller directement le formulaire 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!