1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
---
title: '::after (:after)'
slug: Web/CSS/::after
tags:
- CSS
- Disposition
- Pseudo-element
- Reference
- Web
translation_of: Web/CSS/::after
---
{{CSSRef}}
En CSS, **`::after` **crée un [pseudo-élément](/fr/docs/Web/CSS/Pseudo-éléments) qui sera le dernier enfant de l'élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS {{cssxref("content")}}. Par défaut, ce contenu est de type « [en ligne](/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_types_de_boîte) ».
```css
/* Ajoute une flèche après les liens */
a:after {
content: "→";
}
```
> **Note :** les pseudo-éléments générés par `::before` et `::after` sont [contenus dans la boîte de mise en forme de l'élément](https://www.w3.org/TR/CSS2/generate.html#before-after-content). Aussi, `::before` et `::after` ne s'appliquent pas aux *[éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé)* tels que les éléments {{HTMLElement("img")}} ou {{HTMLElement("br")}}.
## Syntaxe
{{csssyntax}}
> **Note :** CSS3 a introduit la notation `::after` (avec deux deux-points) pour distinguer les [pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) des [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments). Les navigateurs acceptent aussi`:after`, introduite dans CSS2.
## Exemples
### Utilisation simple
Nous allons ici créer deux classes : une pour les paragraphes ennuyeux et une pour les intéressants. Nous marquerons ensuite chacun de ces paragraphes en ajoutant un pseudo-élément après chacun d’eux.
#### HTML
```html
<p class="texte-ennuyeux">Voici un peu de vieux texte ennuyeux ordinaire.</p>
<p>Voici un peu de texte normal qui n'est ni ennuyeux, ni intéressant.</p>
<p class="texte-interessant">Contribuer à MDN est facile et amusant.
Cliquez simplement sur le bouton Modifier pour ajouter de nouveaux exemples vivants, ou améliorer ceux existants.</p>
```
#### CSS
```css
.texte-interessant::after {
content: "<- maintenant, cela *est* intéressant !";
color: green;
}
.texte-ennuyeux::after {
content: "<- ENNUYEUX !";
color: red;
}
```
#### Résultat
{{EmbedLiveSample('Utilisation_simple', '100%', 170)}}
### Exemple décoratif
On peut mettre en forme du texte ou des images avec la propriété {{cssxref("content")}} à peu près de quelque manière que nous le voulions :
#### HTML
```html
<span class="ruban">Observez où se trouve la boîte orange.</span>
```
#### CSS
```css
.ruban {
background-color: #5BC8F7;
}
.ruban::after {
content: "Voyez cette boîte orange.";
background-color: #FFBA10;
border-color: black;
border-style: dotted;
}
```
#### Résultat
{{EmbedLiveSample('Exemple_décoratif', '100%', 60)}}
### Bulles d’information
Dans l'exemple suivant, on illustre le [pseudo-élément](/fr-FR/docs/Web/CSS/Pseudo-elements) `::after `avec l'expression CSS {{cssxref("attr()")}} et un attribut de données personnalisé `data-descr` afin de créer une _bulle d'information_ de type glossaire en CSS pur.
On peut également aider les utilisateurs de clavier avec cette technique, en ajoutant un `tabindex` de `0` pour faire un `span` focusable, et en utilisant la sélection `:focus`. Cela montre à quel point les options `::before` and `::after `peuvent être flexibles, bien que, pour l'expérience la plus accessible, un widget de divulgation sémantique créé d'une autre manière serait probablement plus approprié..
#### HTML
```html
<p>Voici l’exemple en action du code ci-dessus.<br />
Nous avons un peu de <span data-descr="collection de mots et de ponctuation">texte</span>
ici avec quelques <span data-descr="petites fenêtres surgissantes qui se cachent aussi">
bulles d’information</span>.<br />
Ne soyez pas timide, survolez le texte pour jeter un <span data-descr="à ne pas prendre au sens littéral">œil</span>.
</p>
```
#### CSS
```css
span[data-descr] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: help;
}
span[data-descr]:hover::after {
content: attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
z-index: 1;
}
```
#### Résultat
{{EmbedLiveSample("Bulles_d’information", '100%', 150)}}
## Spécifications
| Spécifications | Statut | Commentaire |
| ------------------------------------------------------------------------------------------------ | -------------------------------------------- | --------------------------------------------------------------------------- |
| {{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}} | {{Spec2('CSS4 Pseudo-Elements')}} | Pas de changement significatif depuis la spécification précédente. |
| {{Specname("CSS3 Transitions", "#animatable-properties", "")}} | {{Spec2("CSS3 Transitions")}} | Permet les transitions sur les propriétés définies sur les pseudo-éléments. |
| {{Specname("CSS3 Animations", "", "")}} | {{Spec2("CSS3 Animations")}} | Permet les animations sur les propriétés définies sur les pseudo-éléments. |
| {{SpecName('CSS3 Selectors', '#gen-content', '::after')}} | {{Spec2('CSS3 Selectors')}} | Introduit la syntaxe à deux deux-points. |
| {{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}} | {{Spec2('CSS2.1')}} | Définition initiale, utilisant la syntaxe à un deux-points. |
## Compatibilité des navigateurs
{{Compat("css.selectors.after")}}
## Voir aussi
- {{cssxref("::before")}}
- {{cssxref("content")}}
|
