Remove Underline on Links with CSS
How to remove the underline on HTML links with CSS, and how to select links depending on location or class or ID.
By. Jacob
Edited: 2021-02-05 16:08
Traditionally, hyperlinks has been styled with an underline to differentiate them from ordinary text; this is really useful for people who has different vision than the general population, since it may make it easier for them to tell that there is a link in a large body of text, it is therefor important that you make sure that your choice of style is equally accessible, and changing the color might not be enough.
To remove the underline on your links with CSS, you can give the text-decoration property a value of none on the relevant links that you want to modify. In general, it is easier to target the links that are located within the specific part of the HTML page that you want to change — to target all links in the article element, you may do like this:
article a {
text-decoration: none;
}
Changing style on links depending on class or id
Alternatively you can also target the hyperlinks that are located inside of elements with a specific id or class; keep in mind that ids should be unique while classes can be repeated:
#main_content a {
text-decoration: none;
}
The result should look like this:
Link: beamtic.com
It is rarely a good idea to add classes on hyperlinks, since you can instead target the links you need depending on their location. But, if you need to use a class on your links:
.link_style_content {
text-decoration: none;
}
Then include the class on the link directly:
<a href="https://beamtic.com/" class="link_style_content">beamtic.com</a>
Tell us what you think: