18041 sujets

Questions générales et questions de débutants

Content: " ";

Bonjour tout le monde !
Je vois souvent cette propriété css en inspectant le code de sites web "modernes":
element {
      content: "";
}

Souvent, cette propriété est appliquée à un pseudo element (:before / :after). Je suis curieux et j'aimerais comprendre l'intéret de ce code. Je suis allé me renseigner sur des sites comme csstricks, impossible de trouver des information. Quelqu'un pourrait m'aider ?

Merci de m'avoir lu, et bon week end à tous.
Bonjour,

L’élément content utilisé avec :before ou :after permet d'écrire avant ou après une class, un id ou une balise.

Par exemple :


p:before { // ou p::before
    content: "Paragraphe : ";
    color:red;
}

donne :

Paragraphe : <p>Texte 1 </p>
Paragraphe : <p>Texte 2 </p>

Tu pourra trouver plus d'info ici :
https://developer.mozilla.org/fr/docs/Web/CSS/:before[/url]

En espérant avoir aidé Smiley smile
Modifié par Bri3uc (24 Jan 2015 - 12:48)
Merci pour la réponse rapide !
En fait, ce qui m'intrigue, c'est que la chaine de caractères dans "content" est volontairement laissée vide (
content: " ";
).
gc-nomade a écrit :
... sans cette règle, le pseudo élément n'est pas généré.

C'est exactement ça.

Les pseudo éléments permettrons par exemple de générer virtuellement des éléments : alors qu'auparavant il fallait deux ou trois éléments html imbriqués pour produire un effet donné - sur un titre par exemple - il n'en faut désormais plus qu'un.

Par exemple, sur ce site, les titres disposants d'une ligne grise sur leur droite et les boites d'information utilisent seulement les pseudo éléments, avec des content:'' ou pas. Mais dans le code source il n'y a que des balises <h2> ou des balises <p>.

Cette pratique a été systématisée sur une bonne partie du framework de ce site, et cela allège d'autant le code html qui reste donc très clair.
Modifié par Olivier C (01 Dec 2018 - 13:25)
Salut,

Ce qu'il faut comprendre, c'est que la valeur par défaut de la propriété content est normal, valeur qui est calculée comme none si elle s'applique à un pseudo-élément ::before ou ::after (c'est-à-dire pas de génération du pseudo-élément), d'où la nécessité d'une telle déclaration.
Modifié par Victor BRITO (26 Jan 2015 - 00:48)
Bri3uc a écrit :
L’élément content utilisé avec :before ou :after permet d'écrire avant ou après une class, un id ou une balise.

Par exemple :


p:before { // ou p::before
    content: &quot;Paragraphe : &quot;;
    color:red;
}

donne :

Paragraphe : &lt;p&gt;Texte 1 &lt;/p&gt;
Paragraphe : &lt;p&gt;Texte 2 &lt;/p&gt;

salut,
juste pour une petite précision, le pseudo-élément sera toujours généré à l'intérieur de l'élément sélectionné et non avant ou après. Le pseudo-élément sera soit premier ou dernier enfant mais jamais en dehors.
On peut utiliser aussi "content" avec "url" pour insérer des images. On passe aussi souvent par les pseudo-éléments pour générer les fonts icons. Les possibilité sont quasi infinies...
Sujet clos
Aller à