::after (:after)

  • Raccourci de la révision : CSS/:after
  • Titre de la révision : CSS : le pseudo-élément :after | ::after
  • ID de la révision : 50137
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire one or more formatting changes

Contenu de la révision

{{ CSSRef() }}

Résumé

Crée un pseudo-élément qui sera le dernier enfant de l'élément sélectionné. Généralement utilisé pour ajouter du contenu esthétique à un élément. C'est un élément de type en-ligne par défaut.

{{ fx_minversion_note("3.5", "Les versions de Firefox antérieures à Firefox 3.5 n'intègrent que la version CSS 2.0 de :after, les propriétés non éligibles étaient position, float, list-style-* et certains propriétés d'affichage. Firefox 3.5 enlève ces restrictions. Il faut noter que ceci est indépendant du changement de syntaxe pour ::after") }}

Syntaxe

élément:after { propriétés de style } /* Syntaxe CSS2 */

élément::after { propriétés de style }  /* Syntaxe CSS3 */

La notation ::after a été introduite avec CSS 3 de manière à différencier les pseudo-classes et les pseudo-éléments. Les navigateurs acceptent aussi la notation :after introduite dans CSS 2.

Note :  Microsoft Internet Explorer 8 supporte seulement la notation :after.

Exemples

.texteennuyeux:after {
   content:    " Merci à vous d'avoir lu jusque là !"; 
   font-size:  small; 
   color:      red;
   background: gray; 
}

Spécifications

Spécification État Commentaire
CSS 2.1 Generated Content {{ Spec2('CSS2.1') }}  
CSS 2.1 Selectors {{ Spec2('CSS2.1') }}  
CSS Selectors Level 3 {{ Spec2('CSS3 Selectors') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de :after {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }} 8.0 {{ CompatOpera("4") }} 4.0{{ property_prefix("-webkit") }}
Support de ::after {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("1.5") }}{{ property_prefix("-moz") }} 10 {{ property_prefix("-ms") }} {{ CompatOpera("7") }} 4.0{{ property_prefix("-webkit") }}
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de :after {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Support de ::after {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Voir également

{{ Cssxref(":before") }}, {{ cssxref("content") }}

{{ languages( { "en": "en/CSS/:after", "pl": "pl/CSS/:after", "es": "es/CSS/after", "pt": "pt/CSS/:after" } ) }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h3 name="R.C3.A9sum.C3.A9">Résumé</h3>
<p>Crée un <a href="/fr/CSS/Pseudo-éléments" title="Pseudo-éléments">pseudo-élément</a> qui sera le dernier enfant de l'élément sélectionné. Généralement utilisé pour ajouter du contenu esthétique à un élément. C'est un élément de type en-ligne par défaut.</p>
<p>{{ fx_minversion_note("3.5", "Les versions de Firefox antérieures à Firefox 3.5 n'intègrent que la version CSS 2.0 de <code><code>:after</code></code>, les propriétés non éligibles étaient <code><code>position, float, list-style-*</code></code> et certains propriétés d'affichage. Firefox 3.5 enlève ces restrictions. Il faut noter que ceci est indépendant du changement de syntaxe pour <code><code>::after</code></code>") }}</p>
<h3>Syntaxe</h3>
<pre>élément:after { <em>propriétés de style</em> } /* Syntaxe CSS2 */

élément::after { <span style="font-style: italic;">propriétés de style</span> }  /* Syntaxe CSS3 */
</pre>
<p>La notation <code>::after</code> a été introduite avec CSS 3 de manière à différencier les <a href="/fr/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classes</a> et les pseudo-éléments. Les navigateurs acceptent aussi la notation <code>:after</code> introduite dans CSS 2.</p>
<div class="note"><strong>Note :</strong>  Microsoft Internet Explorer 8 supporte seulement la notation <code>:after</code>.</div>
<h3 name="Examples">Exemples</h3>
<pre>.texteennuyeux:after {
   content:    " Merci à vous d'avoir lu jusque là !"; 
   font-size:  small; 
   color:      red;
   background: gray; 
}
</pre>
<h3 name="Sp.C3.A9cifications">Spécifications</h3>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Spécification</th> <th scope="col">État</th> <th scope="col">Commentaire</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS21/generate.html" title="http://www.w3.org/TR/CSS21/generate.html">CSS 2.1 Generated Content</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td> </td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS21/selector.html#before-and-after" title="http://www.w3.org/TR/CSS21/selector.html#before-and-after">CSS 2.1 Selectors</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td> </td> </tr> <tr> <td><a class="external" href="http://dev.w3.org/csswg/selectors3/" title="http://dev.w3.org/csswg/selectors3/">CSS Selectors Level 3</a></td> <td>{{ Spec2('CSS3 Selectors') }}</td> <td> </td> </tr> </tbody>
</table>
<h3 name="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Fonction</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Support de <code>:after</code></td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> <td>{{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }}</td> <td>8.0</td> <td>{{ CompatOpera("4") }}</td> <td>4.0{{ property_prefix("-webkit") }}</td> </tr> <tr> <td>Support de <code>::after</code></td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> <td>{{ CompatGeckoDesktop("1.5") }}{{ property_prefix("-moz") }}</td> <td>10 {{ property_prefix("-ms") }} <a class="external" href="http://msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations" title="http://msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations"></a></td> <td>{{ CompatOpera("7") }}</td> <td>4.0{{ property_prefix("-webkit") }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Fonction</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Support de <code>:after</code></td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td>Support de <code>::after</code></td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3>Voir également</h3>
<p>{{ Cssxref(":before") }}, {{ cssxref("content") }}</p>
<p>{{ languages( { "en": "en/CSS/:after", "pl": "pl/CSS/:after", "es": "es/CSS/after", "pt": "pt/CSS/:after" } ) }}</p>
Revenir à cette révision