How to do Different Colour Underline (CSS & HTML)
If you want to have an underline that is a different colour underline than the text, here is a solution that works, and works in all browsers. It took me a bit of searching before I could find this, so I thought I would post the solution I found that works. There are a number of different suggestions on Stackoverflow, but many of them don’t work well.
You can easily produce a different colour underline than the text if you wrap your text in an <span> as follows:
CSS:
a {
color: orange;
text-decoration: underline;
}
span {
color: #565656;
text-decoration: none;
}
HTML:
<a href="#"> <span>Text</span> </a>
View the CodePen here.
Happy coding!
Write a Reply or Comment