CSS ::after, pas d'affichage sans contenu
lecab
Messages postés
16
Date d'inscription
Statut
Membre
Dernière intervention
-
lecab Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
lecab Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je souhaite prolonger un texte par une ligne avec un pseudo-élément after.
Ma ligne qui est la bordure top du pseudo-élément, ne s'affiche que si la propriété "content" contient quelque chose (ici : blabla) ce qui n'est pas pratique !
Le CSS est le suivant :
La largeur de la div dépend d'un conteneur antérieur. Comment faire ?
Merci
Je souhaite prolonger un texte par une ligne avec un pseudo-élément after.
<div class="lignesimple">Mon_Texte</div>
Ma ligne qui est la bordure top du pseudo-élément, ne s'affiche que si la propriété "content" contient quelque chose (ici : blabla) ce qui n'est pas pratique !
Le CSS est le suivant :
.lignesimple {
font-size: 2em;
line-height: 2em;
font-weight: 300;
padding-top: 3px;
}
.lignesimple::after {
border-top: 2px solid black;
position: relative;
content: "blabla";
top: 23px;
}
La largeur de la div dépend d'un conteneur antérieur. Comment faire ?
Merci
A voir également:
- CSS ::after, pas d'affichage sans contenu
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
2 réponses
Salut
je suis pas sur d avoir piger ce que tu veux ?
mais pour faire un espace et que la bordure apparaisse
tu insere un
En fait tu peux inserer n importe quel code Unicode de cette maniere
la syntaxe pour insérer un code Unicode est \00XXXX
dans cet exemple un espace insécable son code Unicode est U+00A0
,pour l inserer j ai donc remplace U+ par \00 puis coler 00A0
tu peux le doubler ou +
A+
je suis pas sur d avoir piger ce que tu veux ?
mais pour faire un espace et que la bordure apparaisse
tu insere un
\0000A0dans "content"!
En fait tu peux inserer n importe quel code Unicode de cette maniere
la syntaxe pour insérer un code Unicode est \00XXXX
dans cet exemple un espace insécable son code Unicode est U+00A0
,pour l inserer j ai donc remplace U+ par \00 puis coler 00A0
.lignesimple::after {
border-top: 2px solid black;
position: relative;
content: "\0000A0";
top: 23px;
}
tu peux le doubler ou +
content: "\0000A0\0000A0\0000A0\0000A0";
A+
Bonjour,
Effectivement avec
A se souvenir.
J'aurais du être plus explicite, l'effet que je recherche est le suivant :
Mon_texte ------------------------------
La div contient "Mon_texte" qui est variable et s'étend en largeur selon sa div parente.
Je lui ai attribué la classe "lignesimple" auquel s'applique le pseudo-élément after.
En positionnant la bordure haute de after par la propriété top, on l'aligne avec le milieu de la div.
Avec la propriété position:relative, la bordure se décale au bout de Mon_texte. Mais elle ne va pas jusqu'au bout de la div. Malheureusement Mon_texte n'est pas de longueur fixe donc je ne peux pas utiliser content, un coup trop court, un coup trop long .
Si j'utilise un display:block dans le after, la ligne fait toute la largeur de la div, mais recouvre aussi Mon_texte. Avec left je peux décaler le point de départ de la ligne, mais toujours d'une largeur fixe, j'ai donc le problème inverse..
Effectivement avec
\0000A0j'ai une ligne qui fait un caractère.
A se souvenir.
J'aurais du être plus explicite, l'effet que je recherche est le suivant :
Mon_texte ------------------------------
La div contient "Mon_texte" qui est variable et s'étend en largeur selon sa div parente.
Je lui ai attribué la classe "lignesimple" auquel s'applique le pseudo-élément after.
En positionnant la bordure haute de after par la propriété top, on l'aligne avec le milieu de la div.
Avec la propriété position:relative, la bordure se décale au bout de Mon_texte. Mais elle ne va pas jusqu'au bout de la div. Malheureusement Mon_texte n'est pas de longueur fixe donc je ne peux pas utiliser content, un coup trop court, un coup trop long .
Si j'utilise un display:block dans le after, la ligne fait toute la largeur de la div, mais recouvre aussi Mon_texte. Avec left je peux décaler le point de départ de la ligne, mais toujours d'une largeur fixe, j'ai donc le problème inverse..
Merci pour la suggestion, j'avais remarqué que parfois le content contient un espace. Malheureusement dans ce cas, ça ne marche pas.
Pour que l'espace ne soit pas échappé, il faut qu'il soit suivi par un caractère, exemple " b" donne une bordure de 2 caractères de long.
Si je remplace le border-top par border, je vois que la boite est dimensionnée par le content et pas par l'espace libre du div. Si le content est vide la boite se réduit en largeur à un trait vertical.