convert content to md

1 files changed, 134 insertions, 137 deletions

diff --git a/files/fr/web/css/content/index.md b/files/fr/web/css/content/index.md
index cd5ad04b5f..67c293ba5a 100644
--- a/files/fr/web/css/content/index.md
+++ b/files/fr/web/css/content/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/content
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>content</code></strong> est utilisée avec les pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}} afin de générer le contenu d'un élément. Les objets insérés via la propriété <code>content</code> sont des <em><a href="/fr/docs/Web/CSS/Replaced_element">éléments remplacés anonymes</a>.</em></p>
+La propriété **`content`** est utilisée avec les pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}} afin de générer le contenu d'un élément. Les objets insérés via la propriété `content` sont des _[éléments remplacés anonymes](/fr/docs/Web/CSS/Replaced_element)._
 
-<pre class="brush: css no-line-numbers">/* Des mots-clés qui ne peuvent pas être mélangés
+```css
+/* Des mots-clés qui ne peuvent pas être mélangés
   avec d'autres valeurs */
 content: normal;
 content: none;
@@ -20,8 +21,8 @@ content: none;
 content: url("http://www.example.com/test.png");
 content: linear-gradient(#e66465, #9198e5);
 
-/* Une valeur &lt;string&gt;, les caractères non-latin */
-/* doivent être échappées par ex. \000A9 for &amp;copy; */
+/* Une valeur <string>, les caractères non-latin */
+/* doivent être échappées par ex. \000A9 for &copy; */
 content: 'prefix';
 
 /* Valeurs utilisant un compteur */
@@ -46,56 +47,57 @@ content: open-quote chapter_counter;
 content: inherit;
 content: initial;
 content: unset;
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>Le pseudo-élément n'est pas généré.</dd>
- <dt><code>normal</code></dt>
- <dd>Résulte en <code>none</code> pour les pseudo-éléments <code>:before</code> et <code>:after</code>.</dd>
- <dt>{{cssxref("&lt;string&gt;")}}</dt>
- <dd>Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (<code>\000A9</code> représentera par exemple le symbole ©).</dd>
- <dt>{{cssxref("&lt;image&gt;")}}</dt>
- <dd>Une image (valeur de type {{cssxref("&lt;image&gt;")}}) de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;gradient&gt;")}} ou une partie de la page web fournie par la fonction {{cssxref("element()", "element()")}} et qui indique le contenu à afficher.</dd>
- <dt><code>counter()</code> ou <code>counters()</code> (cf. {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}})</dt>
- <dd>Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}} or {{cssxref("counters()")}}. La première possède deux formes : 'counter(<var>name</var>)' ou 'counter(<var>name</var>, <var>style</var>)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (<code>decimal</code> par défaut). La seconde a également deux formes : <code>counters(<var>name</var>, <var>string</var>)</code> ou <code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code>. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (<code>decimal</code> par défaut). Voir <a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">la section sur les compteurs automatiques</a> et sur la numérotation pour plus d'informations.</dd>
- <dt><code>attr(X)</code></dt>
- <dd>Renvoie la valeur de l'attribut X de l'élément comme une chaîne. S'il n'existe pas d'attribut X, une chaîne vide est renvoyée. La sensibilité à la casse du nom de l'attribut dépend du langage utilisé.</dd>
- <dt><code>open-quote</code> | <code>close-quote</code></dt>
- <dd>Ces valeurs sont remplacées par la chaîne appropriée de la propriété {{ cssxref("quotes") }}.</dd>
- <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt>
- <dd>N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+## Syntaxe
+
+### Valeurs
+
+- `none`
+  - : Le pseudo-élément n'est pas généré.
+- `normal`
+  - : Résulte en `none` pour les pseudo-éléments `:before` et `:after`.
+- {{cssxref("&lt;string&gt;")}}
+  - : Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (`\000A9` représentera par exemple le symbole ©).
+- {{cssxref("&lt;image&gt;")}}
+  - : Une image (valeur de type {{cssxref("&lt;image&gt;")}}) de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;gradient&gt;")}} ou une partie de la page web fournie par la fonction {{cssxref("element()", "element()")}} et qui indique le contenu à afficher.
+- `counter()` ou `counters()` (cf. {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}})
+  - : Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}} or {{cssxref("counters()")}}. La première possède deux formes : 'counter(_name_)' ou 'counter(_name_, _style_)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (`decimal` par défaut). La seconde a également deux formes : `counters(name, string)` ou `counters(name, string, style)`. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (`decimal` par défaut). Voir [la section sur les compteurs automatiques](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) et sur la numérotation pour plus d'informations.
+- `attr(X)`
+  - : Renvoie la valeur de l'attribut X de l'élément comme une chaîne. S'il n'existe pas d'attribut X, une chaîne vide est renvoyée. La sensibilité à la casse du nom de l'attribut dépend du langage utilisé.
+- `open-quote` | `close-quote`
+  - : Ces valeurs sont remplacées par la chaîne appropriée de la propriété {{ cssxref("quotes") }}.
+- `no-open-quote` | `no-close-quote`
+  - : N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Titres_et_citations">Titres et citations</h3>
+### Titres et citations
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h1&gt;5&lt;/h1&gt;
-&lt;p&gt; Commençons par une citation de Sir Tim Berners-Lee,
-    &lt;q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"&gt;
-        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.&lt;/q&gt;  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
-&lt;/p&gt;
+```html
+<h1>5</h1>
+<p> Commençons par une citation de Sir Tim Berners-Lee,
+    <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
+        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q>  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
+</p>
 
-&lt;h1&gt;6&lt;/h1&gt;
-&lt;p&gt; Citons le manifeste Mozilla
-    &lt;q cite="http://www.mozilla.org/about/manifesto/"&gt;
+<h1>6</h1>
+<p> Citons le manifeste Mozilla
+    <q cite="http://www.mozilla.org/about/manifesto/">
         Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">q {
+```css
+q {
     color: #00008B;
     font-style: italic;
 }
@@ -103,67 +105,79 @@ content: unset;
 q::before   { content: open-quote }
 q::after    { content: close-quote }
 
-h1::before  { content: "Chapitre "; }</pre>
+h1::before  { content: "Chapitre "; }
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Titres_et_citations', 460, 100)}}</p>
+{{EmbedLiveSample('Titres_et_citations', 460, 100)}}
 
-<h3 id="Ajouter_une_icône_avant_un_lien">Ajouter une icône avant un lien</h3>
+### Ajouter une icône avant un lien
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;a href="http://www.mozilla.org/fr/"&gt;Accueil&lt;/a&gt;</pre>
+```html
+<a href="http://www.mozilla.org/fr/">Accueil</a>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">a::before{
+```css
+a::before{
     content: url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) " MOZILLA: ";
     font:    x-small Arial,freeSans,sans-serif;
     color:   gray;
-}</pre>
+}
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}}</p>
+{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}}
 
-<h3 id="Utiliser_les_classes">Utiliser les classes</h3>
+### Utiliser les classes
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h2&gt;Top des ventes&lt;/h2&gt;
-&lt;ol&gt;
-    &lt;li&gt;Thriller politique&lt;/li&gt;
-    &lt;li class="nouveaute"&gt;Histoires effrayantes&lt;/li&gt;
-    &lt;li&gt;Ma biographie&lt;/li&gt;
-    &lt;li class="nouveaute"&gt;Bit-lit&lt;/li&gt;
-&lt;/ol&gt;</pre>
+```html
+<h2>Top des ventes</h2>
+<ol>
+    <li>Thriller politique</li>
+    <li class="nouveaute">Histoires effrayantes</li>
+    <li>Ma biographie</li>
+    <li class="nouveaute">Bit-lit</li>
+</ol>
+```
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.nouveaute::after {
+```css
+.nouveaute::after {
     content: " Nouveau !";
     color: red;
-}</pre>
+}
+```
 
-<h4 id="Résultat_3">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}}</p>
+{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}}
 
-<h3 id="Utiliser_les_attributs_d’image_et_d’élément">Utiliser les attributs d’image et d’élément</h3>
+### Utiliser les attributs d’image et d’élément
 
-<p>Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après.</p>
+Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après.
 
-<h4 id="HTML_4">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;&lt;a id="moz" href="https://www.mozilla.org/"&gt;Page d'accueil Mozilla&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a id="mdn" href="https://developer.mozilla.org/"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul>
+  <li><a id="moz" href="https://www.mozilla.org/">Page d'accueil Mozilla</a></li>
+  <li><a id="mdn" href="https://developer.mozilla.org/">Mozilla Developer Network</a></li>
+</ul>
+```
 
-<h4 id="CSS_4">CSS</h4>
+#### CSS
 
-<pre class="brush: css">a {
+```css
+a {
   text-decoration: none;
   border-bottom: 3px dotted navy;
 }
@@ -182,82 +196,65 @@ a::after {
 
 li {
   margin: 1em;
-}</pre>
+}
+```
 
-<h4 id="Résultat_4">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Utiliser_les_attributs_d’images_et_d’élément", '100%', 160)}}</p>
+{{EmbedLiveSample("Utiliser_les_attributs_d’images_et_d’élément", '100%', 160)}}
 
-<h3 id="Remplacer_un_élément">Remplacer un élément</h3>
+### Remplacer un élément
 
-<p>Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une valeur de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;image&gt;")}} . Le contenu ajouté avec <code>::before</code> ou avec <code>::after</code> ne sera plus généré car l'élément sera devenu un élément remplacé.</p>
+Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une valeur de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;image&gt;")}} . Le contenu ajouté avec `::before` ou avec `::after` ne sera plus généré car l'élément sera devenu un élément remplacé.
 
-<h4 id="HTML_5">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div id="replaced"&gt;Mozilla&lt;/div&gt;
-</pre>
+```html
+<div id="replaced">Mozilla</div>
+```
 
-<h4 id="CSS_5">CSS</h4>
+#### CSS
 
-<pre class="brush: css">#replaced {
+```css
+#replaced {
   content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
 }
 
 #replaced::after { /* Ceci ne sera pas affiché, */
                    /* l'élément sera un élément remplacé */
   content: " (" attr(id) ")";
-}</pre>
+}
+```
 
-<h4 id="Résultat_5">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}}</p>
+{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Le contenu généré par CSS n'est pas inclus dans le <a href="/fr/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Pour cette raison, il ne fait pas partie de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">arbre d'accessibilité</a> et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal.</p>
+Le contenu généré par CSS n'est pas inclus dans le [DOM](/fr/docs/Web/API/Document_Object_Model/Introduction). Pour cette raison, il ne fait pas partie de l'[arbre d'accessibilité](/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal.
 
-<ul>
- <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">La prise en charge relative à l'accessibilité pour les contenus générés par CSS generated content – Tink (en anglais)</a></li>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html"><em>Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
+- [La prise en charge relative à l'accessibilité pour les contenus générés par CSS generated content – Tink (en anglais)](https://tink.uk/accessibility-support-for-css-generated-content/)
+- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)
+- [_Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Content", "#content-property", "content")}}</td>
-   <td>{{Spec2("CSS3 Content")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'generate.html#content', 'content')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.content")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Spécifications
 
-<ul>
- <li>{{cssxref("::after")}}</li>
- <li>{{cssxref("::before")}}</li>
- <li>{{cssxref("quotes")}}</li>
- <li>{{Cssxref("::marker")}}</li>
- <li>{{cssxref("url()", "url()")}}</li>
-</ul>
+| Spécification                                                                    | État                             | Commentaires         |
+| -------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("CSS3 Content", "#content-property", "content")}} | {{Spec2("CSS3 Content")}} |                      |
+| {{SpecName('CSS2.1', 'generate.html#content', 'content')}}     | {{Spec2('CSS2.1')}}         | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.content")}}
+
+## Voir aussi
+
+- {{cssxref("::after")}}
+- {{cssxref("::before")}}
+- {{cssxref("quotes")}}
+- {{Cssxref("::marker")}}
+- {{cssxref("url()", "url()")}}