How Can I Get My Text Underline A Different Colour To The Text?

I tried

text-decoration: underline solid #75bb03;

But nothing happens.

Is it even possible?

I have grey text and want a green underline on my <h3> tags


hello you can do it many ways…

but one simple example can be following…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>page title</title>
<style type="text/css">
.underline {
text-decoration: underline;
.text {
<div class="underline"><span class="text">some text</span></div>

Another solution would be to use a border instead of an underline. (border-bottom: 1px solid green;).

I’d second the use of a border, as it will be easier to change it later on if you decide to change it.

Just a word of advice, you should consider general usability when designing a website, underlined text is commonly associated with links, actually it’s quite rare nowadays to see any underlined text that isn’t a link.

A user might think your headline is a link, and when it doesn’t work might think your site is broken, leave and never return (some users are that stupid, believe me).

Cheers I will give the first example a go. Had thought of border bottom but the way my padding is set up on the <h3> it does not give the proper effect I am after.


Really? I wouldn’t think so with what I am using it for. It’s just on the front page to emphasis the different heading sections, their clearly not linkable as the content is directly beneath them, i.e

Websites Visited

Maybe you have a point though. I will have a think about that.


It’s just a word of advice from personal experience, whether you follow it or not is your decision.

I’ve found over the years that headlines don’t necessarily need to be underlined. But you can use a border across the full space, so that doesn’t look like the text itself is underlined and it becomes a design element, see for example:

And you can use both padding and margin to get your desired effect.

Thanks for the advice, I will have a think :cool:

I think using border-bottom would be the least complicated way to do it.

Just get rid of the padding and apply it to surrounding elements to get the same effect. There is no point in adding additional markup if you don’t have to.

I agree that the border bottom is the least complicted way

im in agreement with c2uk. A bottom border will ad better design effectiveness to a website. Um, that is ofcourse depending on the overall design of the rest of the site but 90% of the time it will be fine.

Thanks for agreeing with my Nick and welcome to Sitepoint!

Off Topic:

You might want to edit your signature and make it into a proper link

yea… it was a quick insert for a signature when i signed up… Ill get around to it…

makin a steak dinner right now :wink: lol

[ot]just mentioned it because Sitepoint doesn’t add this nasty nofollow to those links.

And bon appetite :)[/ot]