Apprends à styliser des parties spécifiques d'éléments en utilisant les pseudo-éléments CSS comme ::before, ::after, ::first-line et ::first-letter sans ajouter de HTML supplémentaire.
Un pseudo-élément te permet de styliser une partie spécifique d'un élément, ou d'insérer du contenu généré, sans ajouter de balisage HTML supplémentaire. Ils utilisent le préfixe double deux-points :: pour les distinguer des pseudo-classes (deux-points simple :).
Les pseudo-éléments les plus couramment utilisés sont :
::before — Insère du contenu généré avant le contenu réel de l'élément.::after — Insère du contenu généré après le contenu réel de l'élément.::first-line — Stylise la première ligne d'un élément de type bloc (la quantité de texte dépend de la largeur de l'élément).::first-letter — Stylise la première lettre d'un élément de type bloc (idéal pour les lettrines).::placeholder — Stylise le texte de substitution des champs de formulaire.::selection — Stylise le texte que l'utilisateur a sélectionné.Important : ::before et ::after nécessitent la propriété content pour fonctionner, même si c'est une chaîne de caractères vide content: "".
<style>
.fancy-heading {
font-size: 24px;
text-align: center;
color: #333;
}
/* Add a decorative star before the heading */
.fancy-heading::before {
content: "\2605 ";
color: gold;
}
/* Add a decorative star after the heading */
.fancy-heading::after {
content: " \2605";
color: gold;
}
/* Drop cap effect */
.article-text::first-letter {
font-size: 2em;
font-weight: bold;
color: darkblue;
float: left;
margin-right: 4px;
}
.article-text::first-line {
font-variant: small-caps;
}
</style>
<h1 class="fancy-heading">Welcome</h1>
<p class="article-text">
Once upon a time, there was a web developer who
discovered the power of pseudo-elements. They could
add decorations without extra HTML markup.
</p>La propriété content est ce qui fait fonctionner ::before et ::after. Sans elle, le pseudo-élément ne sera pas affiché.
content: "Hello" insère le texte "Hello".content: "" affiche une boîte vide que tu peux styliser (utile pour les formes décoratives).attr() — content: attr(data-label) récupère la valeur d'un attribut de l'élément.content: "\2022" insère un caractère puce.content: url(icon.png) insère une image (moins courant).content: " *" avec couleur rouge).Note : Le contenu généré par les pseudo-éléments ne fait pas partie du DOM et n'est pas accessible aux lecteurs d'écran dans tous les navigateurs. Ne l'utilise pas pour des informations essentielles.
Que se passe-t-il si tu utilises ::before sans définir la propriété content ?