Styling Links Underline

Whenever I start developing a new website or work on a new theme, I happen to spend quite some time how to underline hypertext. Recently, I while I was working on a new block-based theme, I happened to reach into the same pigeonhole again. This was time to bookmark my references for use cases.

In this CSS-Tricks article, Ollie Williams writes “hyperlinks are the defining feature of the internet; and from the internet’s inception, they have been underlined. It’s a universally understood convention. The meaning is crystal clear — an underline means a link“.

Ollie reminds us that many websites have ditched the classic default underlining of hyperlinks including The New York Times, New York Magazine, The Washington Post, Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia.

It appears that it’s not only me but others too face similar confusion while styling links underlines. Here Chris from CSS-Tricks writes:

Styling the underlines that sit beneath links can be a tricky business, and I constantly forget what’s the best approach depending on the situation. Chris Coyier | CSS-Tricks

However I am from an ol’school and prefer underline in my posts. I often underline text with border-bottom and occasionally with box-shadow and try to avoid text-decoration, often without fully understanding their pros and cons.

In this CSS-Tricks article, John Jameson describes beautifully common ways to underline links with good and bad for each.

text-decoration

This is the default and most common way to style hyperlinks. It has just an single property.

/* text-decoration */
a {
  text-decoration: underline;
}

One of the main disadvantage of text-decoration is color customization, which uses the default color unless some hacks like in the following from Olli’s post:

a {
  text-decoration-color: #EA215A;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
}
border-bottom

The border-bottom property is common alternative to text-decoration, to style links with color, thickness and other styling. Revisiting the above example again.

/* styling with border-bottom */
a {
  text-decoration: none;
  border-bottom: 1px solid #EA215A;
}

Underlining with border-bottom property is below the descenders which can be addressed by making elements inline-block and reducing line-height.

/* border-bottom */
.a {
  text-decoration: none;
  border-bottom: 1px solid #EA215A;
  display: inline-block;
  line-height: 0.85;
}

One of the main disadvantages of this simple method is it is positioned far away and difficult to reposition.

box-shadow

This methoddraws an underline with two inset box shadows: one to create a rectangle and a second to cover it up‘.

/* box-shadow */
.a {
  background-size: 1px 1em;
  box-shadow: 
    inset 0 -0.175em white,
    inset 0 -0.2em #000;
  display: inline;
}

John Jameson describes also describes styling links with background-image and svg filters. Additional description on box-shadow property is available in this MDN documentation.

To wrap up, border-bottom and box-shadow are two common styling methods that are applied in my own themes and also in WordPress default themes.

Some Useful Resources
Filed Under CSS