Le pseudo-élément CSS est utilisé pour styliser la partie d'un élément spécifique. Par exemple, il peut être utilisé pour insérer du contenu avant ou après l'élément ou le style la première ligne ou la lettre de l'élément. Pour ce faire, les pseudo-éléments avant et après entre en vigueur sont utilisés.

Ce blog vous invitera à CSS "avant" et "après»Sélecteurs. Mais avant cela, nous discuterons de la syntaxe des pseudo-éléments.

Comment utiliser «pseudo-élément» dans CSS?

La syntaxe du pseudo-élément est mentionnée ci-dessous:

Sélecteur :: pseudo-élément
Propriétés CSS…

Ici:

• "Sélecteur": Les éléments HTML que nous voulons styliser dans CSS sont choisis à l'aide des sélecteurs CSS. Ces sélecteurs peuvent être des sélecteurs d'identification, des sélecteurs d'éléments, des sélecteurs de classe ou plus.
• "Pseudo-élément»: Le pseudo-élément est utilisé pour styliser la partie d'un élément spécifique. Il peut être avant, après, première ligne, première lettre, ou plus.
• "Propriétés CSS»: Ces propriétés peuvent être utilisées pour styliser le contenu ajouté.

Exemple

La première étape consiste à créer une nouvelle div avec la classe "principal". Dans cet élément div, incluez

et

Éléments pour ajouter du contenu à la page Web:

Bonjour le monde!

Linuxhint est le meilleur site Web de tutoriel.

Rejoignez notre communauté

Nous écrivons des articles et faisons des vidéos pour éduquer le monde en ligne.

Style avant l'élément «H2»

H2 :: avant
Contenu: "->";
la couleur verte;

Le "H2 :: avant»Fait référence à l'ajout de style à l'élément H2 avec les propriétés suivantes:

• "contenu»La propriété spécifie le contenu inséré dans l'élément.
• "couleur»La propriété est utilisée pour définir la couleur du texte de l'élément.

Élément de style «P»

.P principal
taille de police: 20px;

Le ".P»Fait référence à l'élément p de la div principale. Sa taille de police est définie sur 20px en utilisant le «taille de police" propriété.

Voici le résultat du code ci-dessus:

Comme nous pouvons le voir, chaque élément H1 du fichier HTML est spécifié avec le symbole avant lui.

Voici la liste du contenu qui peut être spécifié dans la propriété de contenu:

• "Une pause de ligne»: Pour insérer une pause de ligne, utilisez«\UN" personnage
• "Rien»: Il est spécifié comme des virgules inversés vides et est utile lors de l'insertion d'images d'arrière-plan.
• "Une image»: Pour insérer une image dans la propriété de contenu, nous spécifions« l'URL »de l'image.
• "Un string»: Les caractères spéciaux doivent être codés comme une entité Unicode.

Comment ajouter l'élément gif «avant»?

Nous pouvons également ajouter des GIF ou des images avant ou après les éléments. Regardez l'exemple ci-dessous.

Style avant l'élément «H1»

H1 :: avant
Image de fond: URL (/ gifs / sourire.gif);
taille arrière: 50px;
République de fond: sans répétition;
Affichage: bloc en ligne;
Largeur: 50px;
hauteur: 50px;
contenu: "";

Le "H1 :: avant»Fait référence au style d'insert avant l'élément H1. Les propriétés suivantes sont appliquées à l'objet inséré avant l'élément H1:

• "image de fond»La propriété spécifie l'url du GIF.
• "taille de l'arrière-plan»La propriété est utilisée pour spécifier la taille de l'arrière-plan. S
• "Répétition du fond»La propriété définit comment les images sont répétées.
• "afficher«Propriété avec la valeur»bloc en ligne»Permet pour spécifier la hauteur et la largeur de l'élément.
• "largeur»La propriété définit la largeur de l'élément HTML.
• "hauteur»La propriété définit la hauteur de l'élément HTML.
• "contenu»La propriété est utilisée pour insérer le contenu généré conjointement avec les pseudo-sélecteurs.

Style «Main» Div

.principal
Color en arrière-plan: RVB (245, 245, 44);
rembourrage: 5px;

Le ".principal«La classe de l'élément DIV est stylée avec les propriétés répertoriées:

• "Couleur de l'arrière plan»La propriété est utilisée pour spécifier la couleur d'arrière-plan de l'élément.
• "rembourrage»La propriété est utilisée pour régler l'espace à travers le contenu du T ou à l'intérieur de la bordure.

On peut observer que le GIF est placé avant chaque élément H1:

Comment insérer des symboles «après» des éléments spécifiques?

Le pseudo-sélectionneur «::après”Est ​​utilisé pour insérer du contenu après l'élément. L'exemple ci-dessous démontre le pseudo-sélectionneur.

Exemple

Créez un nouvel élément div avec le «principal" classe. À l'intérieur de cet élément, ajouter

et

Éléments pour ajouter du contenu à la page Web:

Html

Langage Signalétique Hyper Text

CSS

Feuille de style en cascade

Style après élément «H2»

H2 :: après
contenu: "*";
La couleur rouge;
taille de police: 30px;

Le "H2 :: After»Fait référence à l'après de l'élément H2. Vous trouverez ci-dessous les propriétés qui y sont appliquées:

• "contenu»La propriété spécifie le contenu inséré dans l'élément.
• "couleur»La propriété est utilisée pour définir la couleur de la police.
• "taille de police»La propriété est utilisée pour le réglage de la taille de la police de l'élément.

Élément de style «P»

.contenu principal p
taille de police: 20px;

La taille de la police de l'élément P de la div-contenu principal est spécifiée à l'aide du «taille de police" propriété.

La sortie de l'extrait de code ci-dessus est illustrée ci-dessous:

Nous avons réussi à apprendre CSS avant et après les sélecteurs dans CSS.

Conclusion

Dans CSS, les pseudo-éléments sont utilisés pour spécifier certaines propriétés de style à la partie d'un élément. Par exemple, le «::avant" et "::après»Les éléments spécifiés sont utilisés pour ajouter le style avant et après l'élément souhaité, respectivement. Ce blog a démontré l'utilisation de CSS avant et après les sélecteurs.