askvity

How Do I Add Underline in an Anchor Tag?

Published in CSS Text Styling 4 mins read

To add an underline to an anchor tag (<a> link) in HTML, you primarily use the text-decoration CSS property. This powerful property allows you to control the lines applied to text, including underlining, overlining, and strikethrough effects.

Understanding Anchor Tag Underlines

By default, most web browsers automatically display anchor tags with an underline to visually indicate that they are clickable links. However, designers often want to customize this behavior, either to remove the default underline, add it only on interaction (like hovering), or style it uniquely. CSS provides the precise control needed for these scenarios.

Adding a Permanent Underline to Links

If you want to ensure an anchor tag always has an underline, even if browser defaults or other styles have removed it, you can explicitly set the text-decoration property to underline.

CSS:

a {
  text-decoration: underline;
}

This CSS rule targets all <a> elements and applies a permanent underline to them.

Adding Underline on Hover for an Interactive Effect

A common and user-friendly design pattern is to show an underline only when a user hovers their mouse over a link. This provides visual feedback without cluttering the page with constant underlines.

As referenced, to add an underline to a link while hovering, you can use the text-decoration property in CSS and set it to underline. You can then use the :hover pseudo-class to apply this effect only on hover. This code will add an underline to any link element when you hover over it.

Here's how to implement it:

HTML:

<p>Visit our <a href="https://example.com">Example Website</a> for more information.</p>

CSS:

/* First, remove the default underline for all links (optional, but common for hover effects) */
a {
  text-decoration: none;
}

/* Add underline only on hover */
a:hover {
  text-decoration: underline;
}

In this example:

  • a { text-decoration: none; } ensures that links start without an underline.
  • a:hover { text-decoration: underline; } applies the underline only when the user's mouse pointer is over the link.

Removing the Default Underline

Conversely, if you wish to remove the default underline that browsers apply to links, you can set the text-decoration property to none. This is often done when designers prefer to use other visual cues (like color changes or bolding) to indicate interactivity.

CSS:

a {
  text-decoration: none;
}

This simple rule will remove the underline from all anchor tags on your webpage.

Advanced Text Decoration Styling

Beyond simply adding or removing underlines, the text-decoration property can be combined with other properties for more nuanced styling:

  • text-decoration-color: Changes the color of the underline.
  • text-decoration-style: Defines the style of the line (e.g., solid, double, dotted, dashed, wavy).
  • text-decoration-thickness: Controls the thickness of the line.

These properties can be used individually or as a shorthand using the text-decoration property (e.g., text-decoration: underline wavy red 2px;).

Example of Advanced Styling:

CSS:

a.custom-underline {
  text-decoration: underline wavy #007bff 2px; /* Combines style, color, and thickness */
  text-underline-offset: 5px; /* Adds space between text and underline */
}

a.custom-underline:hover {
  text-decoration-color: #ff0000; /* Change color on hover */
}

Practical Scenarios and Best Practices

  • Consistency: Maintain a consistent style for your links throughout your website to improve user experience.
  • Accessibility: While removing underlines can create a cleaner look, always ensure that links are still clearly identifiable. Relying solely on color changes for link identification can be problematic for users with color vision deficiencies.
  • Specificity: Use CSS classes or IDs if you need to apply different underline behaviors to specific links rather than all <a> tags.

Example using a class:

HTML:

<p>Download the <a href="/file.pdf" class="no-underline">PDF document</a>.</p>
<p>Read more <a href="/article" class="underline-on-hover">here</a>.</p>

CSS:

/* All links start with no underline by default (optional global reset) */
a {
  text-decoration: none;
}

/* Specific class to ensure no underline */
.no-underline {
  text-decoration: none;
}

/* Specific class for underline on hover */
.underline-on-hover:hover {
  text-decoration: underline;
}

By leveraging the text-decoration CSS property and the :hover pseudo-class, you have full control over how underlines appear on your anchor tags, enhancing both the aesthetics and usability of your web content.

Related Articles