28241 sujets

CSS et mise en forme, CSS3

[Résolu] Titre avec border bottom en décalé

Bonjour à tous,

Je bloque un petit peu et je voulais savoir si ma demande était possible.

Dans mon code HTML j'ai le bloc suivant :

<span class="montitre">Mon titre</span>

Je voulais savoir si il était possible d'avoir le résultat suivant en CSS (voir image dans le post)
J'ai tenté d'utilisé Border-bottom mais comment lui donner un padding-left qui est égale au contenu de mon texte.


upload/1935-titresectio.jpg

Je vous remercie.
Bonsoir,

Utiliser la bordure du span en elle-même ne me paraît pas possible. Par contre peut-être que cela serait gérable en utilisant un composant généré d'une taille définie, tout dépend du reste du projet.

Ceci te mettra peut-être sur la voie. L'inconvénient est que tu es obligé de définir la taille du contenu généré. A terme ça me paraît fort peu viable comme idée.
J'ai créé un code répondant à tous les cas de figure de longueur de titre, je me sers pour cela des pseudo éléments et de display:inline-block. Un exemple sur cette page (la bordure est des deux côtés mais elle peut très bien n'être qu'à gauche) : Typography.
gcyrillus a écrit :
@Greg_Lumiere pas sur pour la taille

avec display;table ou flex sur le titre, qui en passant meriterait un &lt;hx&gt;, le pseudo peut prendre l'espace restant ou une largeur relative ou une largeur statique .
Un pen pour illustrer l'idée : http://codepen.io/gc-nomade/pen/mOWxrb
Cdt,
Ha oui effectivement, autant pour moi. Ca ne m'était pas venu à l'esprit. Smiley confused

Smiley biggrin
Un grand merci pour vos réponses je n'en attendais pas tant, cela me fait penser qu'il faut vraiment que je m'améliore avec le CSS3, je vois de plus en plus l'utilisation du AFTER

Voici mon code (sans la mise en forme du titre )

http://codepen.io/alasomic/pen/dOvLVX

Donc si j'ai bien compris .titre_section:after le AFETR indique la création d'un bloc dont le contenu sera vide content: ''; dont le background sera disposé en bas no-repeat 0 calc(100% - 0.25em); la propriété flex:1 me permet de dire que le contenu va s'étirer jusqu'à la limite de mon conteneur si c'est bien ça

Enfin je pense avoir compris même si deux ou trois choses m'échappe.

En tout cas un grand merci !
Administrateur
Bonjour,

:after c'est CSS2.1 et IE8+ Smiley cligne Et c'est bien pratique Smiley smile

Bon je retrouve pas le "T'es pas cap" n°1, 2 ou 3 que Raphaël avait lancé à ce sujet Smiley decu L'exercice était d'avoir des points de suite à droite de mots de largeurs différentes ou une "bordure" (à la hauteur du milieu du titre) de part et d'autre d'un titre.
Felipe a écrit :
Bon je retrouve pas le "T'es pas cap" n°1, 2 ou 3 que Raphaël avait lancé à ce sujet Smiley decu L'exercice était d'avoir des points de suite à droite de mots de largeurs différentes ou une "bordure" (à la hauteur du milieu du titre) de part et d'autre d'un titre.

Je m'en souviens, mais les solutions apportées alors avaient pas mal de limitations : notamment - de mémoire - il fallait que le titre ne comporte qu'une seule ligne sinon le résultat était aléatoire. Certaines solutions apportées depuis remplissent tous les cas de figure.
Administrateur
Je me souviens que le Bonus était pour un fonctionnement sur IE6/7 Smiley biggol C'est assez ancien anéfé
Sujet clos
Aller à