Les pseudo-éléments sont l'un des sélecteurs les plus avancés disponibles pour une utilisation en CSS. L'objectif principal de ces sélecteurs est de créer un style unique, sans modifier le document HTML utilisé pour créer la structure de base d'une page Web donnée.

Voici comment utiliser des pseudo-éléments en CSS.

Pseudo-éléments communs

Il existe une longue liste de pseudo-éléments disponibles pour faciliter la vie d'un développeur Web. Certains de ces pseudo-éléments incluent:

• Avant que
• Après
• Toile de fond
• Première ligne
• Première lettre

Dans des situations spécifiques, certains pseudo-éléments s'avéreront plus appropriés que d'autres, mais la seule chose qui reste constante est la structure générale d'utilisation de tout pseudo-élément.

Exemple de structure de pseudo-éléments

selector:: pseudo-élément {
/ * code css * /
} 

Bien que tu puisses utiliser un élément HTML comme sélecteur, il est recommandé d'utiliser une classe ou un identifiant pour éviter de cibler des éléments involontaires dans votre mise en page. L'élément, le style ou les données que vous souhaitez insérer à la position souhaitée doivent être placés entre les accolades.

Les pseudo-éléments avant et après sont les plus populaires de la liste, et étant donné qu’il existe de nombreuses façons pratiques de les utiliser, il n’est pas difficile de comprendre pourquoi.

Utilisation du pseudo-élément Before en CSS

Bien que ce ne soit pas impossible, il est difficile de superposer des images avec du texte lisible en CSS. Ceci est principalement dû au fait que l'image et le texte occuperaient la même position sur une page Web.

Il est relativement facile de envoyer une image à l'arrière-plan d'un groupe de texte, mais lorsque cette image est trop claire, elle a tendance à submerger le texte qui se trouve au-dessus. Dans ces cas, l'étape suivante consiste à tenter de rendre l'image moins opaque à l'aide de la propriété opacity.

Le seul problème est que puisque l'image et le texte occupent la même position, le texte deviendra également quelque peu transparent.

L'un des rares moyens efficaces de résoudre ce problème consiste à utiliser le pseudo-élément before.

Utilisation de l'exemple de pseudo-élément Before

.landingPage {
/ * Dispose le texte sur la superposition d'image * /
affichage: flex;
flex-direction: colonne;
justify-content: centre;
align-items: centre;
text-align: centre;
/ * règle la page pour qu'elle s'ajuste à différentes tailles d'écran * /
hauteur: 100vh;
}
.landingPage:: avant {
teneur:'';
/ * importe une image * /
arrière-plan: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
centre / couvercle sans répétition;
/ * place une superposition au-dessus de l'image * /
opacité: 0,4;
/ * rend l'image visible * /
position: absolue;
haut: 0;
gauche: 0;
largeur: 100%;
hauteur: 100%;
}

Le code ci-dessus est créé pour être utilisé à l'unisson avec la classe HTML landingPage ci-dessous. Comme indiqué dans le code ci-dessus, en utilisant le pseudo-élément before, nous pouvons cibler l'image et utiliser la propriété d'opacity dessus avant que l'image ne soit combinée avec le texte.

Utilisation du pseudo-élément Before


C'est le résultat de l'utilisation du pseudo-élément avant
pour superposer et image avec un texte lisible.

Cela entraînera une superposition sur l'image et un texte clair affiché en haut, comme indiqué dans l'image ci-dessous:

Utilisation du pseudo-élément After dans CSS

Une utilisation pratique du pseudo-élément after est d'aider à la création d'un formulaire HTML. La plupart des formulaires sont créés avec un ensemble de champs qui nécessitent des données pour que le formulaire soit soumis avec succès.

Une façon d'indiquer qu'un champ dans un formulaire nécessite des données consiste à placer un astérisque après le libellé de ce champ. Le pseudo-élément after vous offre un moyen pratique de le faire.

Utilisation de l'exemple de pseudo-élément After

.required:: after {
teneur: '*';
La couleur rouge;
} 

L'insertion du code ci-dessus dans la section CSS de votre formulaire garantira que chaque étiquette contenant la classe requise sera directement suivie d'un astérisque rouge. Le pseudo-élément après est également pratique dans cet exemple car il permet de séparer le style de la structure (ce qui est toujours idéal dans le développement logiciel.)

La propriété Content

Comme le montre l'exemple de pseudo-élément ci-dessus, la propriété content est l'outil utilisé pour insérer un nouveau contenu sur une page Web. Cette propriété n'est utilisée qu'avec les pseudo-éléments avant et après.

Il est important de noter que même s'il n'y a pas de contenu disponible pour alimenter la propriété content (comme dans l'exemple de pseudo-élément before ci-dessus), vous devez toujours utiliser la propriété content dans les paramètres du pseudo-élément avant ou après pour les faire fonctionner comme destiné.

Vous pouvez maintenant utiliser des pseudo-éléments en CSS

Dans cet article, vous avez appris à identifier et à utiliser des pseudo-éléments dans vos programmes CSS. On vous a présenté les pseudo-éléments avant et après et on vous a donné des moyens pratiques d'utiliser les deux. Vous avez également pu voir pourquoi la propriété content est nécessaire pour une utilisation réussie des pseudo-éléments avant et après.

10 exemples de code CSS simples que vous pouvez apprendre en 10 minutes

Vous voulez en savoir plus sur l'utilisation du CSS? Essayez ces exemples de code CSS de base pour commencer, puis appliquez-les à vos propres pages Web.

Lire la suite

A propos de l'auteur