text-decoration:underline;

I want to make my headings like this:

• text: black
• underline: blue

But I don't know how, cause the property 'color' affect both the text and the underline - and then they get the same color

Any ideas?

 

h1 { color : black; border-bottom: blue; }

Code (markup):

Tell us exactly for which headings you need this and do you need headings to be links etc etc .... a little more info please but you have code for what I understand you need up there ...

 

Thanks, but I don't think I can use the property border-bottom. I will try to explain why.

If I use border-bottom the "underline" gets wider than the text in the heading and I only want the underline to be the same width as the text, but in another color.

 

play with width of the element .... that will probably make it work

 

This is where the power of the segregating element, span, does the job.

h1 {
    color: red;
    text-decoration: underline;
    }
    
h1 span {
    color: blue;
    }
=========
<h1><span>generic header</span></h1>

Code (markup):

cheers,

gary

 

kk5st: Thanks, really nice