How to remove underline from hyperlink

Hello friends while I was working with my own WordPress site, I encountered this error. I tried every single method to remove the hyperlink and every where people were saying that text-decoration:none will do the job. It is true setting “text-decoration:none” can solve the problem if you have your own custom website , html or css. But if you are working with WordPress things might be challenging.

So I am writing here the summary of all the methods to remove the underline from your hyperlink.

First Snippet: The code below can remove all the underline’s from all of your website.

a:hover, a:focus, a:visited, a {
    text-decoration: none !important;
}

2nd Snippet : If you want to remove underline from certain links then you can apply the following class to your <a> tags hyperlinks.

.mylinks a:hover, a:focus, a:visited, a {
text-deocration: none !important;
}

If you are working with word press first do “inspect element” and check what is causing the underline below the link. Because in my theme “TwentySixteen” , and also in some other themes, the code mentioned above might not work. The reason is <a> tag is not causing the underline. It is the box-shadow property of the <a> tag that is causing the underline, you can set it to none.

Actual ->>>>>>> box-shadow: 0 1px 0 0 currentColor;
Modify it ->>>> box-shadow:none;

So your custom css will look like this.

a {
    text-decoration: none !important;
box-shadow: none !important;
}