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

Cette fois, je vous apporte une explication détaillée de l'utilisation des pseudo-éléments ::before et ::after Quelles sont les précautions lors de l'utilisation de pseudo-éléments ::before et ::after Voici les pratiques. cas. Jetons un coup d'oeil.

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 Lors de l'écriture d'é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 c'est toujours inconfortable de mettre une balise i vide, alors 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. Les deux ont le même effet :

Utilisé de la même manière À ce stade, nous pouvons utiliser le pseudo-élément ::after pour résoudre le problème classique clear flottant  :

.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 peux avoir besoin d'ajouter le même texte à plusieurs éléments en même temps, vous pouvez alors 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.

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 utiliser d'image d'arrière-plan, 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 changer la taille de l'image en contrôlant la taille du pseudo-élément. Elle ne peut introduire qu'une image de taille fixe (il s'agit d'un. un peu déroutant...), donc personnellement, je pense qu'il est préférable d'utiliser une image d'arrière-plan honnête et 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 effectivement possible, comme ceci :

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

Voici l'effet sous Chrome :

On dirait Très 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 idiot 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 ce cjk-idéographique, vous pouvez également utiliser plus de CSS

style de liste -type Attributs : (Collez directement le tableau dans w3cshool)

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

CSS3 pour créer un grand arrière-plan rayé

Effet d'invite dynamique CSS3 lorsque la souris se déplace dans l'image

Comment utiliser la disposition autocollant-pied de page en CSS

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!