CSS ::after, pas d'affichage sans contenu
Fermé
lecab
Messages postés
16
Date d'inscription
lundi 29 janvier 2007
Statut
Membre
Dernière intervention
4 novembre 2018
-
Modifié par lecab le 18/04/2015 à 14:07
lecab Messages postés 16 Date d'inscription lundi 29 janvier 2007 Statut Membre Dernière intervention 4 novembre 2018 - 18 avril 2015 à 20:02
lecab Messages postés 16 Date d'inscription lundi 29 janvier 2007 Statut Membre Dernière intervention 4 novembre 2018 - 18 avril 2015 à 20:02
A voir également:
- CSS ::after, pas d'affichage sans contenu
- Enlever couleur lien css ✓ - Forum CSS
- Mettre une image à gauche css ✓ - Forum CSS
- Css exposant ✓ - Forum CSS
- Déplacer une image css - Forum CSS
- Css download - Télécharger - HTML
2 réponses
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
18 avril 2015 à 17:08
18 avril 2015 à 17:08
Bonjour,
juste mettre un content avec un espace dedans
juste mettre un content avec un espace dedans
content: " ";
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
18 avril 2015 à 19:16
18 avril 2015 à 19:16
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+
lecab
Messages postés
16
Date d'inscription
lundi 29 janvier 2007
Statut
Membre
Dernière intervention
4 novembre 2018
18 avril 2015 à 20:02
18 avril 2015 à 20:02
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..
18 avril 2015 à 18:10
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.