:before | ::before

  • Raccourci de la révision : CSS/:before
  • Titre de la révision : CSS : le pseudo-élément :before | ::before
  • ID de la révision : 49444
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire 13 words removed

Contenu de la révision

{{ CSSRef() }}

Résumé

Crée un pseudo-élément qui sera le premier enfant de l'élément sélectionné. Généralement utilisé pour ajouter du contenu esthétique à un élément, en utilisant la propriété CSS {{ cssxref("content") }}. 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 :before. Les propriétés non-éligibles sont position, float, list-style-* et quelques propriétés d'affichage.  Firefox 3.5 enlève ces restrictions. Ceci n'est pas lié à la notation ::before dont il est question plus bas.") }}

Syntaxe

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

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

La notation ::before a été introduite par CSS 3 pour différencier les pseudo-classes et les pseudo-éléments. Les navigateurs acceptent aussi la notation :before introduite par CSS 2.

Exemples

q:before { content: "»" }
q:after { content: '«' }

<q>Quelques guillemets</q>, dit-il, <q>sont mieux que pas du tout</q>.

Résultat :    »Quelques guillemets«, dit-il, »sont mieux que pas du tout«.

Notes

Malgré les corrections du positionnement dans Firefox 3.5, il n'est pas possible de générer du contenu comme un élément adjacent similaire (comme la spécification CSS le dit « les pseudo-éléments :before et :after intéragissent avec d'autres boîtes… comme si ils étaient de nouveaux élément insérés ç l'intérieur de leur élément associé. »), ils peuvent être utilisés pour améliorer les mises en pages sans tableaux (p. ex. pour centrer un élément), tant que le contenu à centrer est un élément enfant, une colonne avant et après le contenu peuvent être introduits sans ajouter des éléments de même niveau (c. à. d. qu'il est probablement plus sémantiquement correct d'ajouter un span comme ci-dessous, qu'il ne le serait d'ajouter un div vide avant et après). (Il faut garder à l'esprit d'indiquer une largeur à un élément flottant, puisque sinon, il ne flottera pas !)

<style type="text/css">

#floatme {float:left; width:50%;}

.example:before {
  content: "Flottant avant"; /* Pour obtenir une colonne vide, indiquez simplement un code hexadécimal pour pour une espace insécable : \a0 en tant que contenu (utilisez \0000a0 lorsqu'à la suite d'une telle espace il y a des caractères) */
  float: left;
  width:25%
}
.example:after {
  content: "Flottant après";
  float: right;
  width:25%
}

/* For styling */
.example:before, .example:after, .first {
  background: yellow;
  color: red;
}


</style>
<div class="example">
<span id="floatme">« Flottant avant » devrait être généré sur la gauche du viewport
et ne pas autoriser le débordement de cette ligne sur une nouvelle. De même « Flottant
après » apparaît sur la droite du viewport et ne permet pas de débordement de cette ligne.</span>
</div>

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 :before {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }} 8.0 {{ CompatNo() }} 4.0
Support de ::before {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("1.5") }}{{ property_prefix("-moz") }} 10 {{ property_prefix("-ms") }} {{ CompatNo() }} 4.0 {{ property_prefix("-webkit") }}
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de :before {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Support de ::before {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Voir également

{{ Cssxref(":after") }}, {{ Cssxref("content") }}

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

Source de la révision

<p>{{ CSSRef() }}</p>
<h3 name="R.C3.A9sum.C3.A9">Résumé</h3>
<p>Crée un pseudo-élément qui sera le premier enfant de l'élément sélectionné. Généralement utilisé pour ajouter du contenu esthétique à un élément, en utilisant la propriété CSS {{ cssxref("content") }}. 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>:before</code>. Les propriétés non-éligibles sont <code>position, float, list-style-*</code> et quelques propriétés d'affichage.  Firefox 3.5 enlève ces restrictions. Ceci n'est pas lié à la notation <code>::before</code> dont il est question plus bas.") }}</p>
<h3 name="Syntaxis">Syntaxe</h3>
<pre>élément:before { <em>propriétés de style</em> }  /* Syntaxe CSS2 */

élément::before { <span style="font-style: italic;">propriétés de style</span> }  /* Syntaxe CSS3 */
</pre>
<p>La notation <code>::before</code> a été introduite par CSS 3 pour 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>:before </code>introduite par CSS 2.</p><h3 name="Examples">Exemples</h3>
<pre>q:before { content: "»" }
q:after { content: '«' }

&lt;q&gt;Quelques guillemets&lt;/q&gt;, dit-il, &lt;q&gt;sont mieux que pas du tout&lt;/q&gt;.
</pre>
<p>Résultat :    »Quelques guillemets«, dit-il, »sont mieux que pas du tout«.</p><h3>Notes</h3>
<p>Malgré les corrections du positionnement dans Firefox 3.5, il n'est pas possible de générer du contenu comme un élément adjacent similaire (comme la <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">spécification CSS</a> le dit « les pseudo-éléments <code>:before</code> et <code>:after</code> intéragissent avec d'autres boîtes… comme si ils étaient de nouveaux élément insérés ç l'intérieur de leur élément associé. »), ils peuvent être utilisés pour améliorer les mises en pages sans tableaux (p. ex. pour centrer un élément), tant que le contenu à centrer est un élément enfant, une colonne avant et après le contenu peuvent être introduits sans ajouter des éléments de même niveau (c. à. d. qu'il est probablement plus sémantiquement correct d'ajouter un <code>span</code> comme ci-dessous, qu'il ne le serait d'ajouter un <code>div</code> vide avant et après). (Il faut garder à l'esprit d'indiquer une largeur à un élément flottant, puisque sinon, il ne flottera pas !)</p>
<pre class="script">&lt;style type="text/css"&gt;

#floatme {float:left; width:50%;}

.example:before {
  content: "Flottant avant"; /* Pour obtenir une colonne vide, indiquez simplement un code hexadécimal pour pour une espace insécable : \a0 en tant que contenu (utilisez \0000a0 lorsqu'à la suite d'une telle espace il y a des caractères) */
  float: left;
  width:25%
}
.example:after {
  content: "Flottant après";
  float: right;
  width:25%
}

/* For styling */
.example:before, .example:after, .first {
  background: yellow;
  color: red;
}


&lt;/style&gt;
&lt;div class="example"&gt;
&lt;span id="floatme"&gt;« Flottant avant » devrait être généré sur la gauche du viewport
et ne pas autoriser le débordement de cette ligne sur une nouvelle. De même « Flottant
après » apparaît sur la droite du viewport et ne permet pas de débordement de cette ligne.&lt;/span&gt;
&lt;/div&gt;
</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>:before</code></td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> <td>{{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }}</td> <td>8.0</td> <td>{{ CompatNo() }}</td> <td>4.0</td> </tr> <tr> <td>Support de <code>::before</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>{{ CompatNo() }}</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>:before</code></td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td>Support de <code>::before</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(":after") }}, {{ Cssxref("content") }}</p>
<p>{{ languages( { "en": "en/CSS/:before", "pl": "pl/CSS/:before", "es": "es/CSS/before" } ) }}</p>
Revenir à cette révision