Les pseudo éléments créent des éléments qui n'existent pas dans le DOM.
Ces nouveaux éléments peuvent déjà exister dans le document HTML sous une autre forme comme par exemple la première ligne ou le premier caractère d'un texte. Ils peuvent aussi être créés ex-nihilo avant ou après un élément existant.

La syntaxe utilisée pour les pseudo éléments repose sur un selecteur suivi de 2 caractères deux points ::, suivi du nom du pseudo élément.

syntaxe sélecteur pseudo élément

Il ne doit pas y avoir d'espaces avant ou après le caractère ::.

Le double deux points :: a été introduit avec CSS3 pour différencier les pseudos classes des pseudos éléments. La spécification précise que les navigateurs doivent toutelois accpeter la syntaxe des versions précédentes à savoir un seul :

Par exemple, p:first-letter est équivalent à p::first-letter

Il ne peut y avoir qu'un seul pseudo élément dans un sélecteur.

Le pseudo élément doit être placé à la fin de la séquences de sélecteurs simples.

Première ligne ::first-line

Syntaxe ::first-line 

p::first-line {
	text-decoration: underline;
	}

::first-line sélectionne la première ligne du texte contenu dans un élément en mode d'affichage bloc.

Toutes les propriétés de style ne sont pas utilisables avec ::first-line. Seules sont applicables :

L'exemple suivant affiche en majuscules et sur fond bleu clair la première ligne des paragraphes.

Exemple : pseudo élément 1ère ligne
Fichier CSS : styles.css

Premier caractère ::first-letter

Syntaxe ::first-letter 

p::first-letter {
	font-size: 1.5em;
	}

::first-letter sélectionne le premier caractère du texte contenu dans un élément en mode d'affichage bloc.

Toutes les propriétés de style ne sont pas utilisables avec ::first-letter. Seules sont applicables :

font properties, 'text-decoration', 'text-transform', 'letter-spacing', 'word-spacing' (when appropriate), 'line-height', 'float', 'vertical-align' (only if 'float' is 'none'), margin properties, padding properties, border properties, color property, background properties.

L'exemple suivant affiche le première lettre des paragraphes sous la forme d'une lettrine.

Exemple : pseudo élément 1er caractère
Fichier CSS : styles.css

Contenu avant et après ::before et ::after

Syntaxe ::before
 ::after 

a::before {
	content: "lien : ";
	}

::before et ::after permettent d'insérer du contenu avant ou après le contenu de l'élément ciblé. Ils créent véritablement ex-nihilo des pseudo éléments qui pourront être mis en forme avec n'importe quelles propriétés CSS et du texte ou une image pourra être ajouté comme contenu.

Les pseudo éléments créés par ::before et ::after sont créés dans l'élément ciblé et pas autour de cet élément.

les boîtes élément ciblé, before et after

L'exemple suivant crée des pseudo éléments avant et après le contenu du titre h3 qui est entouré d'un cadre pour bien montrer que les pseudo éléments sont dans l'élément et pas autour de l'élément.

Exemple : pseudo élément before et after
Fichier CSS : styles.css

Les boîtes créées pour contenir les pseudo éléments ::before et ::after sont par défaut des boîtes en ligne. Elles ont des marges, des bordures et un contenu. Toutes les propriétés de style leur sont applicables, sauf les propriétés d'animation et de transition (certains navigateurs en prennent en compte, mais à éviter car trop hasardeux).

Le contenu des pseudo éléments ::before et ::after est défini avec la propriété content qui peut avoir comme valeur :

  • une chaîne de caractère, entourées par des guillements simples ou doubles
    content: "une chaîne de caractère";
  • une chaîne vide
    content: "";
  • une image
    content: url(/dossier/image.png);
  • un compteur
    content: counter(monCompteur);
  • la valeur d'un des attributs de l'élément ciblé
    content: attr(href)

La valeur de la propriété content ne peut pas être du code HTML ou JavaScript

Les possibilités offertes par ces pseudo éléments sont très grandes et donnent lieu à pas mal de "proof of concept" sur le Web. Malheureusement, les choses réalisées sont parfois assez complexes à mettre en place et souvent alourdissent beaucoup un code CSS déjà important.
A noter aussi que d'ajouter du contenu avec des CSS est en total opposition avec le principe de la séparation du contenu (HTML) et de la mise en forme (CSS).

Ce tutoriel utilise les pseudo éléments ::before et ::after dans plusieurs règles de style.

Quand on passe la souris sur un lien externe, l'URL du lien est affichée. C'est fait avec la règle suivante : 

a[href^="http"]:hover::after {
	content: "(" attr(href) ")";
	margin: 0 5px;
	text-decoration: underline;
}

La règle se lit :

  • quand un lien qui commence par "http" (a[href^="http"])
  • est survolé (:hover),
  • on affiche après (::after),
  • la valeur de l'attribut href de ce lien (content: "(" attr(href) ")";)
  • avec une marge à droite et à gauche de 5 pixels (margin: 0 5px;)
  • et on souligne le texte (text-decoration: underline;).

Une autre exemple est celui de la numérotation automatique des figures qui apparaissent ici et là dans le pages. La légende sous les figures est faites avec un élément figcaption. Le début de la légende ("Fig. n : ") est généré automatiquement avec un compteur CSS (counter-reset et conter-increment).

Le compteur de figures est initialisé à 0 à chaque nouvelle page avec une propriété counter-reset sur l'élément body : 

body {
	counter-reset: numFigure;
}

numFigure est le nom du compteur utilisé pour compter les figures de la page.

Le comptage des figures et l'affichage du numéro est fait avec un pseudo élément ::before : 

figcaption::before {
	counter-increment: numFigure;
	content: "Fig. " counter(numFigure) " : ";
}