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 :

- les propriétés police de carcatères,
- les propriétés d'arrière-plan,
- les propriétés de couleur,
- `word-spacing`, `letter-spacing`, `text-decoration`, `text-transform` et `line-height`

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

Exemple : pseudo élément 1ère ligne
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>La Guerre des Etoiles du Milieu</h3> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>De plus en plus portnawak les scénarios chez Disney.</p> </body> </html>
Fichier CSS : styles.css
/* Sélection de la 1ère ligne des paragraphes */ p::first-line { text-transform: uppercase; background: lightcyan; } /* La taille des paragraphes est réduite pour bien avoir plusieurs lignes. Ils sont également centrés. */ p { width: 25em; margin: 1em auto; }

### 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 :

- les propriétés police de carcatères,
- les propriétés d'arrière-plan,
- les propriétés de couleur,
- les propriéts de marges,
- les propriétés de bordure,
- `word-spacing`, `letter-spacing`, `text-decoration`, `text-transform`, `line-height` et `float`.

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
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>La Guerre des Etoiles du Milieu</h3> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>De plus en plus portnawak les scénarios chez Disney.</p> </body> </html>
Fichier CSS : styles.css
/* Sélection du 1er caractère des paragraphes */ p::first-letter { border: 1px solid darkred; background: red; padding: 2px 6px; font-weight: bold; font-size: 1.5em; margin: 0 1px 0 2em; } /* La taille des paragraphes est réduite pour bien avoir plusieurs lignes. Ils sont également centrés. */ p { width: 25em; margin: 1em auto; }

### 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
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>La Guerre des Etoiles du Milieu</h3> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> </body> </html>
Fichier CSS : styles.css
h3::before { content: '--BEFORE--'; color: red; } h3::after { content: '--AFTER--'; color: green; }

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) " : ";
    }