Ronald Roe

Mobile and Touch Friendly Text Links

Here’s a quick trick to make text links, specifically paragraph text links more mobile and touch friendly:

The Concept

Apple recommends a minimum 44px square for touch interface links. We’re going to use a pseudo-element (doesn’t matter which) to create links with larger touch areas. It turns out that a pseudo-element that is tied to a “clickable” element (link, button, etc.) is clickable as well (h/t Chris Coyier for pointing that out).

Essentially, we need to absolutely position the pseudo-element within the link, make it 44px tall X 100% wide. Then, shift the pseudo element partially above the link using a negative top value.

See the pen below. I’ve added an outline around the pseudo-element to show its larger surface area.

Check out this Pen!