From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/_doublecolon_before/index.md | 187 ++++++++++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 files/fr/web/css/_doublecolon_before/index.md (limited to 'files/fr/web/css/_doublecolon_before/index.md') diff --git a/files/fr/web/css/_doublecolon_before/index.md b/files/fr/web/css/_doublecolon_before/index.md new file mode 100644 index 0000000000..51d962fb43 --- /dev/null +++ b/files/fr/web/css/_doublecolon_before/index.md @@ -0,0 +1,187 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::before' +--- +
{{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).

+ +
/* 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")}}.

+
+ +

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.

+ +

Exemples

+ +

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.

+ +

HTML

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

CSS

+ +
q::before {
+  content: "«";
+  color: blue;
+}
+q::after {
+  content: '»';
+  color: red;
+}
+ +

Résultat

+ +

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

+ +

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.

+ +

HTML

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

CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Regardez cette boite orange.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Résultat

+ +

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

+ +

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.

+ +

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>
+
+ +

CSS

+ +
li {
+  list-style-type: none;
+  position: relative;
+  margin: 1px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}
+ +

JavaScript

+ +
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

+ + -- cgit v1.2.3-54-g00ecf