Beamtic's logo

Share via:

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.

86 views

Edited: 2020-09-25 17:11

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>

Comments

  1. How to make italic text by changing the font-style of parts, or all, of the text on a HTML page.
  2. How to add hover effects on links using CSS pseudo classes.
  3. How to change numbers and bullets on HTML lists like ol and ul.
  4. Here you can learn how to change the background of every second HTML element in a parent with CSS.
  5. How to set the cellspacing and cellpadding of HTML tables with pure CSS.

More in: CSS Styling