move *.html to *.md

1 files changed, 179 insertions, 0 deletions

diff --git a/files/fr/web/css/_doublecolon_after/index.md b/files/fr/web/css/_doublecolon_after/index.md
new file mode 100644
index 0000000000..5b7aa71588
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_after/index.md
@@ -0,0 +1,179 @@
+---
+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">&lt;p class="texte-ennuyeux"&gt;Voici un peu de vieux texte ennuyeux ordinaire.&lt;/p&gt;
+&lt;p&gt;Voici un peu de texte normal qui n'est ni ennuyeux, ni intéressant.&lt;/p&gt;
+&lt;p class="texte-interessant"&gt;Contribuer à MDN est facile et amusant.
+  Cliquez simplement sur le bouton Modifier pour ajouter de nouveaux exemples vivants, ou améliorer ceux existants.&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.texte-interessant::after {
+  content: "&lt;- maintenant, cela *est* intéressant !";
+  color: green;
+}
+
+.texte-ennuyeux::after {
+  content: "&lt;- 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">&lt;span class="ruban"&gt;Observez où se trouve la boîte orange.&lt;/span&gt;
+</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">&lt;p&gt;Voici l’exemple en action du code ci-dessus.&lt;br /&gt;
+  Nous avons un peu de &lt;span data-descr="collection de mots et de ponctuation"&gt;texte&lt;/span&gt;
+  ici avec quelques &lt;span data-descr="petites fenêtres surgissantes qui se cachent aussi"&gt;
+  bulles d’information&lt;/span&gt;.&lt;br /&gt;
+  Ne soyez pas timide, survolez le texte pour jeter un &lt;span data-descr="à ne pas prendre au sens littéral"&gt;œil&lt;/span&gt;.
+&lt;/p&gt;</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>
+
+<p>{{Compat("css.selectors.after")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::before")}}</li>
+ <li>{{cssxref("content")}}</li>
+</ul>