CSS text-decoration underline color [duplicate]

Question

Possible Duplicate:
Changing Underline color

It's possible to change only line color which is under text? I would like to see something like red letters with a blue line below it, but I can't find out how to get this done.

Verbenia

CSS3 now has the text-decoration-color property. (See my answer here) , although at the moment it lacks cross-browser support – Inelegant

It's hard to say if this is a duplicate because each question noted, is not specific enough. There are answers below concerning links, but in this question it is not specified whether they mean just inline text, links, or as seen in the other post, "underline" <u> which in no longer valid in HTML4. This question needs to be re-written to define what it is - so that it can be more helpful to others. – Weal

caniuse.com/#feat=text-decoration – Caulicle

Answer 1

(for fellow googlers, copied from duplicate question) This answer is outdated since text-decoration-color is now supported by most modern browsers.

You can do this via the following CSS rule as an example:

text-decoration-color:green

---

If this rule isn't supported by an older browser, you can use the following solution:

Setting your word with a border-bottom:

a:link {
  color: red;
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:hover {
 border-bottom-color: green;
}

Darmstadt

Actually, the line will be lower than the real underline. – Ziwot

BornToCode is correct. This does not change the color of the link line, but instead creates a line that is much lower, so much lower that it doesn't look good. – Mangrove

also keep in mind that this causes links on images also to have this border - not the case with text-decoration – Catherincatherina

You should (always) add a border none (!important) to images. – Darmstadt

@BornToCode The line will be lower if you don't set it appropriately. @Catherincatherina if you set all links to have a border, then they will all have a border. To avoid too large of an ubrella, target your links within p a { style: here } etc. @Darmstadt you should never(ever) use !important. jsfiddle.net/sheriffderek/9BwNv – Weal

If you make the a display: inline-block, and set it's line-height to .7em or so, it will be exactly the same as text-decoration's default styling. – Weal

Never-mind.. that has consequences on long stretches... – Weal

Note that when the text wraps over more than one line a border bottom will always appear at the bottom going the full width of the element. True underlines follow only the text and if you want toc achieve this you must use the extra span approach. – Laurence

the major problem is when the line wraps you get only underline at bottom of a block – Sanfo

css 3.0 supports this. See compatible browsers caniuse.com/#feat=text-decoration – Caulicle

Answer 2

You can do it if you wrap your text into a span like:

a {
  color: red;
  text-decoration: underline;
}
span {
  color: blue;
  text-decoration: none;
}

<a href="#">
  <span>Text</span>
</a>

Genuflect

@JezenThomas You say the extra element isn't necessary. How can you do this without at least two spans? Anyways this DOES change the color of the underline compared to the text with at least two spans if you apply the styles on the right wrappers. – Liquesce

@DerekLitz I think the answer from Robuust demonstrates quite clearly how this can be achieved. – Balcke

@JezenThomas Yes, Robuust's answer demonstrates how this can be achieved with a border, however, this answer demonstrates how you can actually have a different color underline then the the text. Since this demonstrates how this can be done, the duplicate question answer that says it's not possible is just plain wrong... So, with your comment you're saying the extra element isn't necessary if you use a border instead of text-decoration: underline;? – Liquesce

@DerekLitz Yes, that’s what I’m saying. And you’re right; the answer to the duplicate question is incorrect, because clearly it’s possible. However, just because you can do it, doesn’t mean you should. It’s silly; you don’t gain anything by using text-decoration over border. – Balcke

@JezenThomas Actually, yes you do gain something by using text-decoration over border. Visually, when you use border-bottom, this places the line further down than if you use text-decoration. You can clearly see the difference if you're trying this in text with multiple lines (like I'm doing now, and how I ended up on this SO question). – Fosse

@JezenThomas For the sake of reducing the code by a line, you could actually remove the 'text-decoration' property from the span class, since a span doesn't have its own underline anyway. – Allemande

I actually found this by accident while trying to fix someone else's code and couldn't figure out how the underline was changing but not the text. Google sent me here, even though I was trying to find to exact opposite answer (make the colors uniform, but not sure why they are not) – Gareth

You may easily use a pseudo css element as I have demonstrated here. This mimics native behavior, and does not add html markup. @DerekLitz – Emmerich

@Fosse - Another advantage of doing it this way is that you can underline say a link that takes up two or more lines, whereas with border you can't. – Krissie

Just for the record - same trick works with <p> as well (instead of <span>) – Owenism

Answer 3

As far as I know it's not possible... but you can try something like this:

.underline 
{
    color: blue;
    border-bottom: 1px solid red;
}

<div>
    <span class="underline">hello world</span>
</div>

Dilatation

Answer 4

You can't change the color of the line (you can't specify different foreground colors for the same element, and the text and its decoration form a single element). However there are some tricks:

a:link, a:visited {text-decoration: none; color: red; border-bottom: 1px solid #006699; }
a:hover, a:active {text-decoration: none; color: red; border-bottom: 1px solid #1177FF; }

Also you can make some cool effects this way:

a:link {text-decoration: none; color: red; border-bottom: 1px dashed #006699; }

Hope it helps.

Et