Headline und Unterstrich

[jobi80]

Hallo,

steh grade auf dem Schlauch:

eine H1 Headline mit beliebigem Text soll rechts *neben* dem Text einen Strich/Unterstrich bekommen, der bis zum Rand des umgebenden Elements geht:

Headline___________

Die H1 darf keine Hintergrundfarbe bekommen, mit der sich ein bottom-border eines umgebenden Elemnets verbergen ließe.

Da der Text variabel sein soll, wird auch eine float-Lösung schwierig.

besten Dank für jede Idee,
Jobi

[apsel]

Om nah hoo pez nyeetz, jobi80!

h1:after {content:"___..._____";} /* auf jeden Fall lang genug */ in Verbindung mit overflow: hidden; für das umgebende Element.

Nicht besonders originell, aber sollte in aktuellen Browsern funktionieren. Im IE<8 klappt das nicht.

Matthias

[Gunnar Bittersmann]

@@apsel:

nuqneH

in Verbindung mit overflow: hidden;

und white-space: nowrap, was zu Problemen bei zu langem Text/zu schmalem Viewport führt

für das umgebende Element

welches h1 ist.

Nicht besonders originell

Yep.

Qapla'

[Gunnar Bittersmann]

@@jobi80:

nuqneH

eine H1 Headline mit beliebigem Text soll rechts *neben* dem Text einen Strich/Unterstrich bekommen, der bis zum Rand des umgebenden Elements geht:

Headline___________

h1  
{  
    white-space: nowrap;  
    width: 100%;  
    overflow: hidden;  
}  
  
h1:after  
{  
    border-bottom: 1px solid red;  
    content: "\A0";  
    display: inline-block;  
    width: 100%;  
}

mit der Einschränkung, dass der Text der Überschrift bei zu großer Länge nicht mehrzeilig wird, sondern abgeschnitten.

Und natürlich der Einschränkung, dass IE < 8 keinen generierten Content kennt und andere Vorstellungen von "inline-block" hat.

Aber für IE < 8 gäbe es ja CSS-Expressions …

Qapla'