How to remove underline from links in your theme

Published January 14, 2015 by CSS Newbies.

By default in most browsers links are underlined with a text decoration. Many times you’ll want to remove this underline to make you site look better or only have the link show up when hovering over it.

You’ll want modify the a element and change the text decoration to none

 a { text-decoration: none; }

If you only want to apply this to a few links on your page, add a class to the links and use this code

.clas_name { text-decoration: none; }

As previously mentioned, you can also only have the underline show up when hovering over a link. This can be done by adding the :hover modifier to the element or class name.

a:hover { text-decoration: underline; }
.clas_name:hover { text-decoration: underline; }

These have to be used in conjunction with removing the text underline to get the desired effect.

  1. Henry Evenz (reply)

    “Underlining links is far more important than many so called web designers realize, take them away and you remove an accessibility feature.” I have heard this quote so many times ever since I have started to search the importance and effect of underlined link website. I also found this one http://www.lionleaf.com/blog/should-you-underline-links-google-doesnt-anymore/ which is really close to what I am looking for but your ideas are interesting as well. Do you think the vertical positioning of the underline would be strongly related to the line-height/leading?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>