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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
---
title: '::after (:after)'
slug: 'Web/CSS/::after'
tags:
- CSS
- Disposition
- Pseudo-element
- Reference
- Web
translation_of: 'Web/CSS/::after'
---
<div>{{CSSRef}}</div>
<p>En CSS, <strong><code>::after</code> </strong>crée un <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> 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 « <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_types_de_boîte">en ligne</a> ».</p>
<pre class="brush:css no-line-numbers">/* Ajoute une flèche après les liens */
a:after {
content: "→";
}</pre>
<div class="note">
<p><strong>Note :</strong> les pseudo-éléments générés par <code>::before</code> et <code>::after</code> sont <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">contenus dans la boîte de mise en forme de l'élément</a>. Aussi, <code>::before</code> et <code>::after</code> ne s'appliquent pas aux <em><a href="/fr/docs/Web/CSS/Élément_remplacé">éléments remplacés</a></em> tels que les éléments {{HTMLElement("img")}} ou {{HTMLElement("br")}}.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
{{csssyntax}}
<div class="note">
<p><strong>Note :</strong> CSS3 a introduit la notation <code>::after</code> (avec deux deux-points) pour distinguer les <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> des <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a>. Les navigateurs acceptent aussi<code>:after</code>, introduite dans CSS2.</p>
</div>
<h2 id="Exemples">Exemples</h2>
<h3 id="Utilisation_simple">Utilisation simple</h3>
<p>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.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: 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></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">.texte-interessant::after {
content: "<- maintenant, cela *est* intéressant !";
color: green;
}
.texte-ennuyeux::after {
content: "<- ENNUYEUX !";
color: red;
}</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample('Utilisation_simple', '100%', 170)}}</p>
<h3 id="Exemple_décoratif">Exemple décoratif</h3>
<p>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 :</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><span class="ruban">Observez où se trouve la boîte orange.</span>
</pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">.ruban {
background-color: #5BC8F7;
}
.ruban::after {
content: "Voyez cette boîte orange.";
background-color: #FFBA10;
border-color: black;
border-style: dotted;
}</pre>
<h4 id="Résultat_2">Résultat</h4>
<p>{{EmbedLiveSample('Exemple_décoratif', '100%', 60)}}</p>
<h3 id="Bulles_d’information">Bulles d’information</h3>
<p>Dans l'exemple suivant, on illustre le <a href="/fr-FR/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <code>::after </code>avec l'expression CSS {{cssxref("attr()")}} et un attribut de données personnalisé <code>data-descr</code> afin de créer une <em>bulle d'information</em> de type glossaire en CSS pur.</p>
<p>On peut également aider les utilisateurs de clavier avec cette technique, en ajoutant un <code>tabindex</code> de <code>0</code> pour faire un <code>span</code> focusable, et en utilisant la sélection <code>:focus</code>. Cela montre à quel point les options <code>::before</code> and <code>::after </code>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é..</p>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: 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></pre>
<h4 id="CSS_3">CSS</h4>
<pre class="brush: 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;
}</pre>
<h4 id="Résultat_3">Résultat</h4>
<p>{{EmbedLiveSample("Bulles_d’information", '100%', 150)}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécifications</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
<td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
<td>Pas de changement significatif depuis la spécification précédente.</td>
</tr>
<tr>
<td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td>
<td>{{Spec2("CSS3 Transitions")}}</td>
<td>Permet les transitions sur les propriétés définies sur les pseudo-éléments.</td>
</tr>
<tr>
<td>{{Specname("CSS3 Animations", "", "")}}</td>
<td>{{Spec2("CSS3 Animations")}}</td>
<td>Permet les animations sur les propriétés définies sur les pseudo-éléments.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Introduit la syntaxe à deux deux-points.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Définition initiale, utilisant la syntaxe à un deux-points.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
<p>{{Compat("css.selectors.after")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("::before")}}</li>
<li>{{cssxref("content")}}</li>
</ul>
|
