Lors du développement d'un site Web, les développeurs Web rencontrent souvent des situations où il est nécessaire pour coiffer une certaine partie d'un élément ou ajouter un certain contenu avant ou après un élément particulier. Toutes ces tâches peuvent être effectuées en utilisant des pseudo-éléments fournis dans CSS. Ce message vous apprendra tout sur les pseudo-éléments.

Vous passerez par les sujets suivants dans cet article.

1. Quels sont les pseudo-éléments dans CSS
2. ::première lettre
3. ::Première ligne
4. ::avant
5. ::après
6. ::sélection

Quels sont les pseudo-éléments dans CSS

Les pseudo-éléments sont des mots clés qui sont utilisés pour styliser une partie particulière d'un élément spécifié. Ceux-ci sont insérés dans un sélecteur lorsque. Par exemple, vous souhaitez donner de la couleur à la première lettre d'un élément ou vous souhaitez ajouter du texte avant un certain élément.

Syntaxe

sélecteur :: pseudo-élément
valeur de la propriété;

Ici, nous avons mis en évidence certains des pseudo-éléments importants pour votre meilleure compréhension.

::première lettre

Ceci est utilisé pour donner un certain style à la première lettre d'un texte, en outre, il est appliqué sur les éléments au niveau du bloc uniquement. Il prend en charge de nombreuses propriétés CSS telles que la couleur, la police, la marge, la bordure, le rembourrage, l'arrière-plan, etc.

Exemple

Suivez le code ci-dessous pour comprendre comment fonctionne cet élément.

Html

Pseudo-éléments

Ici, nous avons défini un

élément.

CSS

H1 :: Première lettre
Couleur: Sandybrown;
Style de police: italique;
taille de police: 50px;

Nous donnons une couleur Sandybrown, un style de police italique et une taille de police 50px à la première lettre de la tête en utilisant la pseudo-élément de première lettre ::.

Sortir

La première lettre de l'en-tête a été stylée en utilisant la pseudo-élément de première lettre ::.

::Première ligne

Comme son nom l'indique, cela est utilisé pour donner un peu de style à la première ligne d'un texte, en outre, il est applicable sur les éléments au niveau du bloc uniquement. Il prend en charge certaines propriétés CSS qui sont de couleur, de police, d'arrière-plan, etc.

Exemple

Supposons que vous souhaitiez donner de la couleur, du style et du poids à la première ligne de

élément. Suivez le code ci-dessous.

Html

Comme son nom l'indique, ce pseudo-élément est utilisé pour styliser la première ligne d'un texte. Cet élément ne peut également être appliqué qu'aux éléments au niveau des blocs. Il prend en charge certaines propriétés CSS qui sont de couleur, de police, d'arrière-plan, etc.

Dans le code ci-dessus, nous avons défini un

élément et ajouté du texte dedans.

CSS

P :: Première ligne
couleur violet;
Style de police: italique;
Police-poids: Bold;

En utilisant le pseudo-élément de première ligne, nous donnons de la couleur, de la police et du poids de police à la première ligne du paragraphe uniquement.

Sortir

La première ligne du paragraphe a été stylée avec succès.

::avant

Dans le but d'ajouter du contenu avant une certaine partie d'un élément, le :: avant que le pseudo-élément ne soit utilisé. Il prend en charge la propriété CSS Content.

Exemple

Supposons que vous souhaitiez ajouter des guillemets au début d'un paragraphe. Utilisez le code suivant.

Html

C'est un paragraphe.

Ici, nous définissons notre paragraphe avant lesquels nous ajoutons tous un point de devis.

CSS

p :: avant
contenu: '"';
Couleur bleue;
taille de police: 25px;

Dans le code ci-dessus, nous ajoutons une marque de devis avant le paragraphe et lui donnant la couleur bleue, et définissant sa taille sur 25px en utilisant le :: avant le pseudo-élémentation.

Sortir

La guillemette a été ajoutée avec succès en utilisant le :: avant le pseudo-élémentation.

::après

Cela fonctionne d'une manière similaire au :: avant le pseudo-élément, avec la seule différence qu'il insère du contenu après une certaine partie d'un élément. Cet élément est également utilisé avec la propriété CSS Content.

Exemple

Suivez l'exemple ci-dessous pour comprendre le fonctionnement du :: After Pseudo-Element.

Html

Feuilles de style en cascade

Ici, nous avons spécifié un

élément et y a ajouté du contenu.

CSS

H1 :: après
Contenu: '(pseudo-éléments)';
Couleur bleue;
taille de police: 15px;

Nous ajoutons un certain contenu après le

élément, donnant ce contenu particulier couleur bleue et réglant sa taille de police à 15px.

Sortir

Un contenu a été ajouté après la rubrique.

::sélection

Afin de styliser un élément qu'un utilisateur sélectionne, la pseudo-élément de sélection :: est utilisée. Il prend en charge certaines propriétés CSS qui sont de couleur, d'arrière-plan, etc.

Exemple

Supposons que vous souhaitiez qu'un certain élément soit mis en surbrillance lorsqu'un utilisateur le sélectionne. Suivez le code ci-dessous.

Html

Un certain titre

Ici, nous spécifions une rubrique.

CSS

H1 :: Sélection
Color en arrière-plan: hotpink;

Dans le code ci-dessus, nous utilisons la pseudo-élément de sélection :: pour donner à la tête une couleur rose chaque fois que l'utilisateur le sélectionne.

Sortir

La pseudo-élément de sélection :: fonctionne correctement.

Conclusion

Les pseudo-éléments sont des mots clés qui sont utilisés pour styliser une partie particulière d'un élément spécifié. Il existe divers pseudo-éléments dans le CSS, cependant, certains des pseudo-éléments les plus importants et couramment utilisés sont; ::première lettre, ::Première ligne, ::avant, ::après, et ::sélection. Chacun de ceux-ci est utilisé à différentes fins de style qui est expliqué en détail dans ce post ainsi que l'aide d'exemples appropriés.