CSS text-decoration underline color
CssText DecorationsCss Problem Overview
> 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.
Css Solutions
Solution 1 - Css
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>
Solution 2 - Css
(for fellow googlers, copied from duplicate question) This answer is outdated since [text-decoration-color][2] 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;
}
[2]: https://css-tricks.com/almanac/properties/t/text-decoration-color/ "text-decoration-color"
Solution 3 - Css
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>
Solution 4 - Css
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.