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.