From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/_doublecolon_before/index.md | 182 ++++++++++++-------------- 1 file changed, 81 insertions(+), 101 deletions(-) (limited to 'files/fr/web/css/_doublecolon_before') diff --git a/files/fr/web/css/_doublecolon_before/index.md b/files/fr/web/css/_doublecolon_before/index.md index 51d962fb43..10fe4f2b16 100644 --- a/files/fr/web/css/_doublecolon_before/index.md +++ b/files/fr/web/css/_doublecolon_before/index.md @@ -1,68 +1,74 @@ --- title: '::before (:before)' -slug: 'Web/CSS/::before' +slug: Web/CSS/::before tags: - CSS - Pseudo-element - Reference -translation_of: 'Web/CSS/::before' +translation_of: Web/CSS/::before --- -
{{CSSRef}}
+{{CSSRef}} -

::before crée un pseudo-élément qui sera le premier enfant de l'élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS {{cssxref("content")}}. Par défaut, l'élément créé est de type en-ligne (inline).

+**`::before`** crée un [pseudo-élément](/fr/docs/Web/CSS/Pseudo-éléments) qui sera le premier enfant de l'élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS {{cssxref("content")}}. Par défaut, l'élément créé est de type en-ligne (_inline_). -
/* On ajoute un coeur avant les liens */
+```css
+/* On ajoute un coeur avant les liens */
 a::before {
   content: "♥";
 }
-
+``` -
-

Note : Les pseudo-éléments générés par ::before et ::after sont contenus dans la boîte de mise en forme de l'élément. Aussi, ::before et ::after ne s'appliquent pas aux éléments remplacés tels que {{HTMLElement("img")}} ou {{HTMLElement("br")}}.

-
+> **Note :** Les pseudo-éléments générés par `::before` et `::after` sont contenus dans la boîte de mise en forme de l'élément. Aussi, `::before` et `::after` ne s'appliquent pas [aux éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé) tels que {{HTMLElement("img")}} ou {{HTMLElement("br")}}. -

Syntaxe

+## Syntaxe {{csssyntax}} -

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.

+La notation `::before` a été introduite par CSS 3 pour différencier les [pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) et les [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments). Les navigateurs acceptent aussi la notation `:before `introduite par CSS 2. -

Exemples

+## Exemples -

Ajouter des guillemets

+### Ajouter des guillemets -

Un exemple simple utilisant les pseudo-éléments pour ajouter des guillemets. Ici nous avons ::before et {{cssxref("::after")}} pour effectuer l'insertion.

+Un exemple simple utilisant les pseudo-éléments pour ajouter des guillemets. Ici nous avons `::before` et {{cssxref("::after")}} pour effectuer l'insertion. -

HTML

+#### HTML -
<q>Quelques guillemets</q>, dit-il, <q>sont mieux que pas du tout</q>
+```html +Quelques guillemets, dit-il, sont mieux que pas du tout +``` -

CSS

+#### CSS -
q::before {
+```css
+q::before {
   content: "«";
   color: blue;
 }
 q::after {
   content: '»';
   color: red;
-}
+} +``` -

Résultat

+#### Résultat -

{{EmbedLiveSample('Ajouter_des_guillemets', '500', '50', '')}}

+{{EmbedLiveSample('Ajouter_des_guillemets', '500', '50', '')}} -

Exemple décoratif

+### Exemple décoratif -

Il est possible de mettre du style à du texte ou des images, dans la propriété {{cssxref("content")}} , quasiment de n'importe quelle manière.

+Il est possible de mettre du style à du texte ou des images, dans la propriété {{cssxref("content")}} , quasiment de n'importe quelle manière. -

HTML

+#### HTML -
<span class="ribbon">Observez où est placée la boite orange.</span>
+```html +Observez où est placée la boite orange. +``` -

CSS

+#### CSS -
.ribbon {
+```css
+.ribbon {
   background-color: #5BC8F7;
 }
 
@@ -71,31 +77,34 @@ q::after {
   background-color: #FFBA10;
   border-color: black;
   border-style: dotted;
-}
+} +``` -

Résultat

+#### Résultat -

{{EmbedLiveSample('Exemple_décoratif', 450, 60)}}

+{{EmbedLiveSample('Exemple_décoratif', 450, 60)}} -

Liste de choses à faire

+### Liste de choses à faire -

Dans cet exemple, nous allons créer une simple liste de choses à faire en utilisant les pseudo-éléments. Cette méthode peut être utilisée pour ajouter une petite touche à l'interface utilisateur et améliorer l'expérience utilisateur.

+Dans cet exemple, nous allons créer une simple liste de choses à faire en utilisant les pseudo-éléments. Cette méthode peut être utilisée pour ajouter une petite touche à l'interface utilisateur et améliorer l'expérience utilisateur. -

HTML

+#### HTML -
<ul>
-  <li>Acheter du lait</li>
-  <li>Promener le chien</li>
-  <li>Faire de l'exercice</li>
-  <li>Coder</li>
-  <li>Jouer de la musique</li>
-  <li>Se reposer</li>
-</ul>
-
+```html + +``` -

CSS

+#### CSS -
li {
+```css
+li {
   list-style-type: none;
   position: relative;
   margin: 1px;
@@ -120,68 +129,39 @@ li.done::before {
   margin-top: -1em;
   transform: rotate(45deg);
   width: 0.5em;
-}
+} +``` -

JavaScript

+#### JavaScript -
var list = document.querySelector('ul');
+```js
+var list = document.querySelector('ul');
 list.addEventListener('click', function(ev) {
   if( ev.target.tagName === 'LI') {
      ev.target.classList.toggle('done');
   }
 }, false);
-
- -

Résultat

- -

{{EmbedLiveSample('Liste_de_choses_à_faire', '400', '300', '')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{Spec2('CSS4 Pseudo-Elements')}}Pas de modification significative depuis la spécification précédente.
{{Specname("CSS3 Transitions", "#animatable-properties", "")}}{{Spec2("CSS3 Transitions")}}Les transitions peuvent être appliquées sur les propriétés de ce pseudo-élément.
{{Specname("CSS3 Animations", "", "")}}{{Spec2("CSS3 Animations")}}Les animations peuvent être appliquées sur les propriétés de ce pseudo-élément.
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}{{Spec2('CSS3 Selectors')}}Introduction de la syntaxe avec les deux deux-points.
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}{{Spec2('CSS2.1')}}Définition initiale avec une seule fois le caractère deux-points.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.before")}}

- -

Voir aussi

+``` - +#### Résultat + +{{EmbedLiveSample('Liste_de_choses_à_faire', '400', '300', '')}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------------------------------------------------------------------- | +| {{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}} | {{Spec2('CSS4 Pseudo-Elements')}} | Pas de modification significative depuis la spécification précédente. | +| {{Specname("CSS3 Transitions", "#animatable-properties", "")}} | {{Spec2("CSS3 Transitions")}} | Les transitions peuvent être appliquées sur les propriétés de ce pseudo-élément. | +| {{Specname("CSS3 Animations", "", "")}} | {{Spec2("CSS3 Animations")}} | Les animations peuvent être appliquées sur les propriétés de ce pseudo-élément. | +| {{SpecName('CSS3 Selectors', '#gen-content', '::before')}} | {{Spec2('CSS3 Selectors')}} | Introduction de la syntaxe avec les deux deux-points. | +| {{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}} | {{Spec2('CSS2.1')}} | Définition initiale avec une seule fois le caractère deux-points. | + +## Compatibilité des navigateurs + +{{Compat("css.selectors.before")}} + +## Voir aussi + +- {{cssxref("::after")}} +- {{cssxref("content")}} -- cgit v1.2.3-54-g00ecf