CSS Text-decoration Underline Color


Answer :

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>





(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;
}


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>





Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android SDK Location Should Not Contain Whitespace, As This Cause Problems With NDK Tools