Underline vs Border-bottom
While customizing a singular blog post item on here, I was trying to style the ‘Read More’ link. I was tinkering away in the Inspector of the browser to find the right way to display the link. As I was customizing, I spotted it had a height: 1px and a solid black background color as a pseudo element — which caused me to pause then proceeded to remove that and add border-bottom of 1px solid black. I took another pause and asked myself “is that even the rightway to style a link? Shouldn’t I be using text-decoration:underline ? What’s the difference between the two?” With these questions in mind I went on to explore the differences. Let’s look at the visual differences between the two. For the examples going forward I will use an anchor tag labeled Visit the page.
Underline
The underline text-decoration by default sits close to the text, respects text color contrast and intersects with descending characters like “p,q,g,y, or j” or any descending characters in other languages.
<style>
.underline {
text-decoration: underline;
}
</style>
<a class="underline" href="#">Visit the page</a>Border-bottom
The clear difference is that the border underneath the text by default is created at the bottom of the anchor element’s height.
<style>
.border {
border-bottom: 1px solid black;
}
</style>
<a class="border" href="#">Visit the page</a>I’ll assess them in a few categories: visibility, color contrast and maintenance. But I’d like to get this out the way and they both from an assistive technology standpoint they both pass in which they will both be recognized as a link because these are both semantically recognized as links. They will both be accessible via keyboard tab navigation and a focus ring will show on them when the tab key reaches them on the page.
Visibility
For visibility, you want to make it’s clear and understood by the user what the element is doing. Most user recognize links with a border closely tucked underneath the text.
For dyslexic users, the underline skips descending characters by default.
Engineers don’t have to fiddle with positioning. Using border-bottom in this case would have to adjust position relative to the baseline of the font used in the design. If the baseline of the typography is not understood that could lead to lots of inconsistencies and maintenance in CSS.
Using a link with text decoration underline or the default link style is important for maintaining clear and accessible web navigation. Underlines are a widely recognized visual cue indicating clickable text, improving usability for all users, including those with cognitive or visual impairments.
Color contrast
Color contrast between the background, canvas and surrounding text is established by default when using underline text decoration style especially in forced colors mode.
Using border-bottom could potentially lead to inconsistency in styling. It’s easier to accidentally create low-contrast or offset underlines that users mistake for separators or emphasis on a string of text instead of link indicators.
Maintenance
We want to maintain legacy CSS code and less is more. This means styling just a semantic with its properties.
When styling a link the underline is the same color as the text and all you would need to do is style using the color property.
Using border-bottom leads to styling both the link and the border bottom. Now add the interaction states of hover, active and focus. The complexity of the styling has multiplied even more especially when styling in forced colors. Border-bottom needs to be defined in this state.
You can see where I’m going with this. The clear winner for styling links is text-decoration: underline. It’s cognitively accessible, clear distinction between surrounding text, and easiest to maintain in styling. So with that said, I’m going to make sure the links on my site are following WCAG as much as possible.