Different underline color for block elements

Hi!

I'm trying to use a different underline color than the text color on my
headings using the border-bottom method. Unfortunately the underline
spans the whole width of the heading (not only the text), because
headings are block elements. Is there another way than using
extra-markup like

<div class="h1"><span>My heading</span></div>

to get an underline which only underlines the text?

Thanks for any hints,
Florian
--
Give a man a fish; you have fed him for today. Teach a man to fish,
and he will sit in the boat and drink beer all day. (OldFox)
[------------ http://www.torfbold.com - POV-Ray gallery ------------]

Toby Inkster wrote:

[use :before and :after]

A really nice idea! This brings me, however, to that point again where I
have to decide whether to use nice CSS2 or to take those IE users into
account (no flame wars on that topic, please
I'll have to check what it looks like when :before and :after are not
supported.

Thanks for the help!
Florian
--
If all goes well, you should see an ugly, loathsome, repulsive,
deformed window manager called twm, probably the smallest window
manager available. (Gentoo Linux Handbook)
[------------ http://www.torfbold.com - POV-Ray gallery ------------]

Neal wrote:

Underlining makes people think it's a link. Be careful with this.
Yep. It's for headings only.

Toby's way may work. Another option is to set a width in ems for that
specific heading which works.
That would mean to set the width for each individual heading? In most

cases I'm not a friend of such methods - too much work to keep it
working (it's the same with images for headings, etc.).

Thanks nevertheless!
Florian
--
I have seen the future and it doesn't work. (Robert Fulford)
[------------ http://www.torfbold.com - POV-Ray gallery ------------]

On Sun, 03 Oct 2004 17:57:13 +0200, Florian Brucker <torf (AT) torfbold (DOT) com>
wrote:

Hi!

I'm trying to use a different underline color than the text color on my
headings using the border-bottom method.

Underlining makes people think it's a link. Be careful with this.

Unfortunately the underline spans the whole width of the heading (not
only the text), because headings are block elements.

Yep.

Is there another way than using extra-markup like

div class="h1"><span>My heading</span></div

to get an underline which only underlines the text?

Toby's way may work. Another option is to set a width in ems for that
specific heading which works.

Florian Brucker wrote:

div class="h1"><span>My heading</span></div

Do you apply the underline to h1? Then try to apply it to the span:

h1 span {
border-bottom:1px solid red;
}

HTH
Markus

div class="h1"><span>My heading</span></div

Do you apply the underline to h1? Then try to apply it to the span:
h1 span {
border-bottom:1px solid red;
}

No, that's not the problem When using the above markup, it's no
problem to get the desired effect. My question was if this could be done
*without* extra markup, i.e. "<h1>My heading</h1>". This seems to be
possible, according to the other answers I got.


Greetings,
Florian
--
All religions are founded on the fear of the many
and the cleverness of the few. (Stendhal)
[------------ http://www.torfbold.com - POV-Ray gallery ------------]

On Wed, 06 Oct 2004 00:01:21 +0200, Florian Brucker <torf (AT) torfbold (DOT) com>
wrote:

div class="h1"><span>My heading</span></div

Do you apply the underline to h1? Then try to apply it to the span:
h1 span {
border-bottom:1px solid red;
}

No, that's not the problem When using the above markup, it's no
problem to get the desired effect. My question was if this could be done
*without* extra markup, i.e. "<h1>My heading</h1>". This seems to be
possible, according to the other answers I got.

Try:

h1 {display: inline; border-bottom: 1px solid black;}