{"id":2503,"date":"2021-07-20T11:03:52","date_gmt":"2021-07-20T11:03:52","guid":{"rendered":"https:\/\/learncode.tinjurewp.com\/?p=2503"},"modified":"2021-07-21T11:12:15","modified_gmt":"2021-07-21T11:12:15","slug":"styling-link-underline","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/styling-link-underline\/","title":{"rendered":"Styling Links Underline"},"content":{"rendered":"

Whenever I start developing a new website or work on a new theme, I happen to spend quite some time how to underline<\/em> 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.<\/p>\n

In this CSS-Tricks article<\/a>, Ollie Williams writes “hyperlinks are the defining feature of the internet; and from the internet\u2019s inception, they have been underlined. It\u2019s a universally understood convention. The meaning is crystal clear \u2014 an underline means a link<\/em>“.<\/p>\n

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

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

Styling the underlines that sit beneath links can be a tricky business, and I constantly forget what\u2019s the best approach depending on the situation. Chris Coyier | CSS-Tricks<\/a>
\n<\/cite><\/em><\/p><\/blockquote>\n

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

In this CSS-Tricks article<\/a>, John Jameson<\/em> describes beautifully common ways to underline links with good and bad for each.<\/p>\n

text-decoration<\/code><\/strong><\/h5>\n

This is the default and most common way to style hyperlinks. It has just an single property.<\/p>\n

\/* text-decoration *\/\na {\n  text-decoration: underline;\n}<\/code><\/pre>\n
One of the main disadvantage of text-decoration<\/code><\/a> is color customization, which uses the default color unless some hacks like in the following from Olli’s post<\/a>:<\/p>\n
a {\n  text-decoration-color: #EA215A;\n  text-decoration-thickness: .125em;\n  text-underline-offset: 1.5px;\n}<\/code><\/pre>\n
border-bottom<\/code><\/strong><\/h5>\n
The border-bottom<\/code><\/a> property is common alternative to text-decoration<\/code>, to style links with color<\/em>, thickness<\/em> and other styling. Revisiting the above example again.<\/p>\n
\/* styling with border-bottom *\/\na {\n  text-decoration: none;\n  border-bottom: 1px solid #EA215A;\n}<\/code><\/pre>\n
Underlining with border-bottom property is below<\/em> the descenders<\/em> which can be addressed<\/a> by making elements inline-block<\/code> and reducing line-height<\/code>.<\/p>\n
\/* border-bottom *\/\n.a {\n  text-decoration: none;\n  border-bottom: 1px solid #EA215A;\n  display: inline-block;\n  line-height: 0.85;\n}<\/code><\/pre>\n
One of the main disadvantages of this simple method is it is positioned far away and difficult to reposition<\/a>.<\/p>\n
box-shadow<\/code><\/strong><\/h5>\n
This method<\/a> ‘draws an underline with two inset box shadows: one to create a rectangle and a second to cover it up<\/em>‘.<\/p>\n
\/* box-shadow *\/\n.a {\n  background-size: 1px 1em;\n  box-shadow: \n    inset 0 -0.175em white,\n    inset 0 -0.2em #000;\n  display: inline;\n}<\/code><\/pre>\n
John Jameson describes also describes styling links with background-image<\/a> and svg filters<\/a>. Additional description on box-shadow<\/code> property is available in this MDN documentation<\/a>.<\/p>\n
To wrap up, border-bottom<\/code> and box-shadow<\/code> are two common styling methods that are applied in my own themes and also in WordPress default themes.<\/p>\n
Some Useful Resources<\/h6>\n