[Résolu] Texte avec soulignement central en css

Bonjour,

Je souhaite avoir un trait de soulignement pour mes titres tel que vous pouvez le voir en image.



Bien entendu, je veux que l'effacement soit proportionnel au texte.

Et je ne sais pas comment faire. Dumoins, je ne trouve pas de solution satisfaisante : hr stylisé, div relative, image et hn en absolute...

Auriez-vous une solution ?


Modifié par Manhattan (16 Aug 2013 - 12:26)

salut,
je suppose qu'il y plusieurs façons de faire. En mode flemmard j'aurais fait ça

<p><span>Texte</span></p>

p {position:relative;text-align:center}
p span {display:inline-block;padding:0 5px;background:#fff}
p:before {content:"";position:absolute;width:100%;top:50%;left:0;border-top:1px solid;z-index:-1}

Ca me convient plutôt bien ton mode "flemmard"

C'est pour l'instant ce que j'ai trouvé de moins lourd comme code.
Comme il ne s'agit que de déco, le fait que ie67 ne prenne pas le before ne m'ennuie pas.

Par contre, pourquoi préciser un inline-block sur le span ? Il est inline par défaut ou bien jme trompe ?

http://jsfiddle.net/W5B2B/

Pour le <span> c'est juste histoire de pouvoir lui donner un "padding" pour aérer et ne pas avoir les lignes collées au texte.
À ta place je ne me soucierais vraiment pas de IE6/7, ils sont plutôt morts (en tout cas 6 est enterré et 7 agonise grave).

Je ne me soucie pas de ie67 en effet.
Par contre, je ne pige toujours pas, car en ôtant le inline-block, j'arrive tout de même à faire varier le padding. Ca n'est pas dans le cas d'un padding top et bottom que le inline-block serait nécessaire ?


Modifié par Manhattan (16 Aug 2013 - 14:48)

Oui j'étais concentré sur padding tout court. J'avais prévenu que j'étais en mode flemmard . Effectivement c'est juste dans le cas de dimensions et marges verticales.

EDIT: pour ne pas prêter à confusions, les dimensions dont je parle sont par rapport au "padding" car pour des dimensions "normales" ce n'est pas possible.
Modifié par Zelalsan (16 Aug 2013 - 14:57)

Super ! Désolé d'avoir fait mon chieur, mais j'aime bien comprendre ce que je fais surtout si on m'file le code tout fait

Merci beaucoup

loll bin non, ça arrive de se tromper ou parfois même de faire n'importe quoi et ça ne profite à personne de laisser tel quel .
Et t'inquiète chuis pire que toi quand j'essaye de comprendre.

Cqui m'plait, c'est que ça ne surcharge pas trop mon html :
<h1><span>TITRE</span></h1>

Bon, et bien, à moins que quelqu'un vienne me dire 'pas compatible avec tel navigateur ou norme ce code', je vais partir là-dessus et donc clore le sujet

À part >IE8 je ne vois pas côté compatibilité.
Par contre si je peux ajouter un dernier truc. Il faut laissé le fait de mettre tout en majuscule au CSS, i.e écrire normalement le texte et utiliser "text-transform".

C'est déjà ce que je fais

J'aime les lettres accentuées.

Ah, je viens de comprendre lol j'avais tapé TITRE en maj, mais c'était un exemple.