8.1 Types de pseudo-éléments
Les pseudo-éléments en CSS permettent de styliser certaines parties d'éléments, comme la première lettre, la première ligne ou d'ajouter du contenu avant ou après un élément. Ils offrent des possibilités supplémentaires pour le stylage, sans nécessiter des modifications de la structure HTML. Les pseudo-éléments sont indiqués par deux-points doubles (::).
Pseudo-éléments principaux :
::before::after::first-letter::first-line
8.2 Pseudo-élément ::before
Le pseudo-élément ::before ajoute du contenu avant le contenu
d'un élément. Il est souvent utilisé pour ajouter des éléments décoratifs,
des icônes ou du texte supplémentaire.
Syntaxe :
sélecteur::before {
content: "" | "texte" | url() | counter | attr();
propriété: valeur;
}
Dans le champ content, on spécifie le code HTML à ajouter.
/* Ajoute une flèche avant chaque élément de liste */
li::before {
content: "→ ";
color: red;
}
<ul>
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>Troisième élément de la liste</li>
</ul>
8.3 Pseudo-élément ::after
Le pseudo-élément ::after ajoute du contenu après le contenu d'un
élément. Il est souvent utilisé pour ajouter des éléments décoratifs, des icônes
ou du texte supplémentaire.
Syntaxe :
sélecteur::after {
content: "" | "texte" | url() | counter | attr();
propriété: valeur;
}
Dans le champ content, on spécifie le code HTML à ajouter.
/* Ajoute un point après chaque élément de liste */
li::after {
content: " •";
color: blue;
}
<ul>
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>Troisième élément de la liste</li>
</ul>
8.4 Pseudo-élément ::first-letter
Le pseudo-élément ::first-letter s'applique à la première lettre d'un élément.
Il est souvent utilisé pour créer des lettrines décoratives dans les paragraphes.
Syntaxe :
sélecteur::first-letter {
content: "" | "texte" | url() | counter | attr();
propriété: valeur;
}
Exemple:
/* Agrandit et change la couleur de la première lettre de chaque paragraphe */
p::first-letter {
font-size: 2em;
color: green;
}
<p>Ceci est un exemple de texte dans un paragraphe.</p>
<p>Un autre exemple de texte dans un paragraphe.</p>
8.5 Pseudo-élément ::first-line
Le pseudo-élément ::first-line est appliqué à la première ligne d'un
élément. Il est souvent utilisé pour styliser la première ligne d'un paragraphe.
Syntaxe :
sélecteur::first-line {
content: "" | "texte" | url() | counter | attr();
propriété: valeur;
}
Exemple:
/* Change la couleur et met en gras la première ligne de chaque paragraphe */
p::first-line {
color: navy;
font-weight: bold;
}
<p>
Ceci est un exemple de texte dans un paragraphe qui contient suffisamment de texte pour se rompre en plusieurs lignes, démontrant comment fonctionne le pseudo-élément ::first-line. La première ligne de chaque paragraphe sera mise en évidence en gras et en couleur navy pour attirer l'attention du lecteur. Cet effet est obtenu grâce à la règle CSS que nous avons définie ci-dessus.
</p>
<p>
Notez que le style s'applique uniquement à la première ligne, quelle que soit sa longueur. Le reste du texte dans le paragraphe conserve son style original. Cela peut être utile pour souligner des points clés ou créer un rythme visuel dans le texte.
</p>
GO TO FULL VERSION