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