28172 sujets

CSS et mise en forme, CSS3

Hello toutes et tous !

J'ai besoin d'aide pour mettre une bordure ( border-bottom ) de 3 pixels ou + dans un H1 !
Mais cette bordure doit être de la même longueur que le texte du titre et non pas sur toute la ligne.

Y a-t'il une astuce ?

Merci d'avance
Il va falloir utiliser un mode de rendu différent de "block" (où l'élément en width:auto prend toute la largeur disponible dans le conteneur). Donc display:inline-block ou display:table. Je recommanderais plutôt le second.

Attention: si ton texte passe sur deux lignes tu perds ton effet de soulignement. Pour avoir un effet de soulignement qui marche bien même dans ce cas de figure, mieux vaut utiliser display:inline, ce qui demandera sans doute d'avoir deux éléments: le titre et un SPAN ou bien le titre et un conteneur tel qu'un DIV.
merci kenor et fvsch !

Vos réponses m'ont aidé et elles fonctionnent très bien toutes les deux !!

je me prenais la tête avec un display:block et c'est normal que ça prenait tout la largeur.

1000 merci !!