How To Remove The Underline From Links In CSS - HubSpot Blog

Home » A Link Without Underline Css » How To Remove The Underline From Links In CSS - HubSpot Blog

Maybe your like

In web design, every detail matters — including your links.

Like any other element, links can be styled with CSS properties. With CSS, you can change their color, background, and font size. You can even remove the underline that appears below links.

Download Now: How to Land a Developer Role in the World of AI [Free Checklist]

How you write that CSS depends on what state the links are in. These states, also known as pseudo-classes, are CSS classes based on user activity. Below the four pseudo-classes are defined.

a:link — when the user has not visited, hovered, or clicked on a link

a:visited — after the user has visited the link

a:hover — when the user hovers their mouse over the link

a:active — as the user is clicking on the link

By default, the underline will appear beneath links in every pseudo-state: when hovered over, clicked on, visited, or none of the above. This is shown in the demo below:

gif of a cursor clicking an underlined hyperlink

To remove the underline from links, you can use the CSS text-decoration property. Below we’ll walk through how to define this property to completely remove the underline from links on your site.

How to Remove the Underline from Links in CSS

  1. Add your HTML to the section of your webpage.
  2. Define the four pseudo-classes of links with the text-decoration property in the section.
  3. Make sure that a:link and a:visited come before a:hover, and a:active comes last. This is essential to the cascading of the stylesheet.
  4. Set each property value to “none.”

Tag » A Link Without Underline Css