H1 text font is green, I want to underline that text in red. How?

Forum Moderators: not2easy

Message Too Old, No Replies

H1 text font is green, I want to underline that text in red. How?

Perfection

6:51 pm on May 4, 2007 (gmt 0)

On a site I'm working on, each article page starts off with the title of that article in the header (H1). The text is set to green. What I'm trying to do now is underline this text in red. How do I do this?

Making the H1 border-bottom red adds an underline that goes wider than the text, so that's not good. If I change the H1 width to the exact width of the text it would work... except each page has a header that is a different length of text, so that's not good either.

I'm out of ideas, and I feel quite dumb. =)

So, any help would be very much appreciated.

[edited by: Perfection at 6:52 pm (utc) on May 4, 2007]

Fotiman

7:23 pm on May 4, 2007 (gmt 0)

You will need 2 containers to make this work. The outer container (your H1) will get the red underline style applied. Your inner container (a generic span) will have the new green text color style applied. Here's a working example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
<title></title> 
<style type="text/css"> 
h1 { text-decoration: underline; color: #c00; } 
h1 span { color: #0c0; } 
</style> 
</head> 
<body> 
<h1><span>This is my text</span></h1> 
</body> 
</html>

Perfection

7:36 pm on May 4, 2007 (gmt 0)

Thanks a lot!

sifredi

9:34 pm on May 7, 2007 (gmt 0)

Or,

h1{ color: green; border-bottom: 1px solid red; display: inline; }

Simpler, but could have positional consequences.