Label d'un div

Bonjour,

J'ai une feuille de style qui me permet de mettre en forme un DIV. Le résultat est en pièce jointe.

Le seul problème, c'est que le "titre" du label est codé dans le source HTML et je n'arrive pas à l'ajouter dans le style du DIV.

<div class="code">Lorem ipsum ... [b]<span class="label">label</span>[/b]</div>

ps : évidemment, je peux publier mon css mais pensez-vous que cela soit faisable ?
Modifié par louis28 (20 Mar 2026 - 11:48)

Salut,

Oups la sémantique !

Normalement, c'est plutôt ceci :

<section>
  <h1>ton titre</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas praesentium nam qui numquam quidem, sint corrupti reiciendis voluptatum. Nesciunt deleniti velit libero nulla inventore eaque consequatur! Voluptatibus a nostrum nobis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas praesentium nam qui numquam quidem, sint corrupti reiciendis voluptatum. Nesciunt deleniti velit libero nulla inventore eaque consequatur! Voluptatibus a nostrum nobis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas praesentium nam qui numquam quidem, sint corrupti reiciendis voluptatum. Nesciunt deleniti velit libero nulla inventore eaque consequatur! Voluptatibus a nostrum nobis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas praesentium nam qui numquam quidem, sint corrupti reiciendis voluptatum. Nesciunt deleniti velit libero nulla inventore eaque consequatur! Voluptatibus a nostrum nobis.</p>
</section>

Cependant, je vois class code. Or, il y a un élément spécifique pour ce genre de contexte :
<code> que tu peux cumuler avec <pre>.

Tu devrais mieux nous expliquer le contexte. Dans l'état, ton code html me semble faux.
Modifié par Niuxe (20 Mar 2026 - 12:23)

Bonjour Niuxe,

Bon, c'est vrai, j'ai donné un mauvais exemple

Ce que je voudrais, c'est que le "label" en haut à droite du block soit dans le css et pas dans le html.

Comme je te l'ai indiqué, je ne vois pas le contexte. C'est quoi le lorem ipsum ? Que vas tu mettre ?

Niuxe a écrit :
Comme je te l'ai indiqué, je ne vois pas le contexte.

Le contexte : page html et css

Niuxe a écrit :
C'est quoi le lorem ipsum ?

Lorem ipsum : c'est du faux texte. Tu peux avoir des explication sur cette page https://fr.wikipedia.org/wiki/Lorem_ipsum

Niuxe a écrit :
Que vas tu mettre ?

J'essaie d'être plus clair : si j'applique un style à un texte, celui-ci se trouve entouré par une bordure et en haut à droite un texte encadré ("label" dans l'exemple donné). Je voudrais que le texte encadré en haut à droite se trouve dans la feuille de style.

Bonjour,
Niuxe sait ce que veut dire « Lorem ipsum » c’est un développeur expérimenté. Ce que tu ne nous dis pas c’est le contexte dans lequel tu travail. Le contexte ce n’est pas la techno utilisée (page html et css), c’est le décor, l’environnement, sur quoi tu travail. Soit des explications sur le pourquoi tu fais cette page, ce qu’elle va contenir comme information au final.
Ceci est nécessaire pour pouvoir t’orienter au mieux dans ton projet.
Pour ma part je n’ai pas compris pour quelles raisons tu voudrais que du texte soit dans le CSS plutôt que dans le HTML.
Pour ce faire tu disposes de la propriété « content » des pseudos class ::after et ::before
https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/content

casper2 a écrit :
Bonjour,
Niuxe sait ce que veut dire « Lorem ipsum » c’est un développeur expérimenté. Ce que tu ne nous dis pas c’est le contexte dans lequel tu travail. Le contexte ce n’est pas la techno utilisée (page html et css), c’est le décor, l’environnement, sur quoi tu travail. Soit des explications sur le pourquoi tu fais cette page, ce qu’elle va contenir comme information au final.
Ceci est nécessaire pour pouvoir t’orienter au mieux dans ton projet.
Pour ma part je n’ai pas compris pour quelles raisons tu voudrais que du texte soit dans le CSS plutôt que dans le HTML.
Pour ce faire tu disposes de la propriété « content » des pseudos class ::after et ::before
https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/content

+1

J'avais en tête « content ». Mais comme je n'ai pas le contexte, j'ai préféré m'abstenir d'en parler.

Bien sûr que je connais « lorem ipsum ». J'ai même créé un générateur. J'en parle dans ce sujet : Mon Générateur de Vérités Absolues (Chuck Norris Ipsum).

Pas sût de bine comprendre. Tu voudrais que le texte "label" soit dans la feuille de styles et pas dans le HTML, pourquoi pas utiliser les pseudo-éléments ::before et ::after dans ce cas ?

.code::after {content: 'texte after';}

Mais ai-je bien compris ?

Salut Alainpre

Oui tu as bien compris
Ce n'est pas exactement ce que je voulais mais grâce à ton idée, j'ai pu finaliser ma feuille style. Je n'ai jamais vraiment manipuler les ::before, ::after et content.

J'ai donc :
* un style "toto" qui défini le style du texte
* un style "toto::after" qui défini le style du "label" ET sa position.

C'est vraiment top. Merci
Modifié par louis28 (30 Mar 2026 - 17:30)

Avec plaisir