Skip to main content Accessibility Feedback

Another Way to Make Links More Accessible

Reader Robbert de Kuiper emailed me after yesterday’s article to share another approach for making links for accessible: border-bottom.

You can remove the underline of a link and add a border-bottom to the link to emphasise it. That option also removes the problem with the cut-through descenders and gives the text a little more room ‘to breath’. The default underline always feels a little bit cramped to me. And you can also add extra styling for the border on hover, for example to move it a pixel down.

a {
	color: blue;
	border-bottom: 1px solid blue;
	padding-bottom: 1px;
	text-decoration: none;
	transition: all 0.2s ease;

a:hover {
	color: purple;
	border-bottom-color: purple;
	padding-bottom: 2px;

See it in action here.