Titre et liserai

Bonjour,
comme le titre du post l'indique, je souhaite réaliser des header d'article qui ont l'aspect suivant:

Mon titre__________________

J'ai donc du texte et un liserai calé sur le bas du texte qui s'étire jusqu'au bout de ma div.
Contrainte : > je ne connais pas la largeur de ma div, ni la largeur du texte de mon titre

La feinte actuellement lise en place est celle-ci :

<h3 class="title">Mon titre <span>&nbsp</span></h3>

dans ce cas de figure, je met une couleur de fond à mon h3 qui correspond à la couleur de fond générale, et mon span me sert de liserai que je remonte en margin négative afin qu'il passe sous le titre

.title {
background:#F0F0F0;
color:#757477;
display:inline;
font:20px/22px Georgia,"Times New Roman",Times,serif;
margin-bottom:15px;
text-transform:uppercase;
}

.title span {
border-bottom:1px solid #C6C4CB;
display:block;
margin-bottom:15px;
margin-top:-27px;
}

Je voulais donc avoir un avis général sur cette technique, savoir si vous en préfériez d'autre...
De plus celle que j'ai mis en place me convient moyennement dans la mesure ou la couleur en fond de titre masque légèrement une image en fond de page...

merci pour vos conseils ,astuces et techniques

Salut,

Pour ma part, je procéderais comme suit :

HTML

<h3><span>Mon titre</span></h3>

CSS

h3 {
  border-bottom: 1px solid;
}
h3 span {
  background: white; /* Je précise une couleur de fond */
  padding-right: 1ex; /* Un peu d'espacement à droite */
}

Quant à l'alignement du texte par rapport au liseré, soit j'utiliserais vertical-align au niveau du span, soit je positionnerais le span en relatif (en utilisant top ou bottom pour décaler).
Modifié par Victor BRITO (27 Jul 2010 - 09:36)

Yes en effet, ça à le mérite d'économiser une balise vide et d'être cross-browser sans souci...

reste une question:
vois tu une solution pour éviter de mettre un fond de couleur afin de cacher une partie du liserai ?

un genre de float pour le liserai qui prendrai toute la place restante...

colir a écrit :
reste une question:
vois tu une solution pour éviter de mettre un fond de couleur afin de cacher une partie du liserai ?

Je ne vois pas d'autre solution à part recourir à une couleur de fond (ou à une image de fond sans transparence, à la rigueur).

...moi non plus...

merci bien pour ton aide