web design
& business services

Sri Chinmoy

How to do Different Colour Underline (CSS & HTML)

by Mark D. English
| 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:


a {
   color: orange;
   text-decoration: underline;

span {
   color: #565656;
   text-decoration: none;


<a href="#">

View the CodePen here.

Happy coding!


Write a Reply or Comment

Your email address will not be published.