OmissionStudios

How to do Different Colour Underline (CSS & HTML)

by Arjuna Ghose
| on Sun., 25 Sep. 2016
| Categories: Web Development

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!

Comments