diff options
Diffstat (limited to 'files/fr/web/css/_doublecolon_after')
| -rw-r--r-- | files/fr/web/css/_doublecolon_after/index.html | 181 |
1 files changed, 181 insertions, 0 deletions
diff --git a/files/fr/web/css/_doublecolon_after/index.html b/files/fr/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..7aa9760fa6 --- /dev/null +++ b/files/fr/web/css/_doublecolon_after/index.html @@ -0,0 +1,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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> |