Making the clickable area of in-line links bigger without affecting the layout

accessibility, css, html

Solution

One option that might work is to use the `:after` pseudo-element. Something like this:

a {
    position: relative
}
.bigger:after{
    content:"";
    padding: 50px;  
    position: absolute;
    left: -25px;
    top: -25px;
}

Numbers could be tweaked as you like. Only downside I can see right away is if you need to support anything pre-IE8. http://caniuse.com/#feat=css-gencontent

Here's a fiddle.

Problem

I'm looking to make the clickable area of links bigger than they actually are for accessibility since for the intended users it can be difficult to hit them. About 1.5x the size may be appropriate. These are links in normal text, so I cannot actually make them bigger which would mess up the layout. I make use of HTML5, CSS3, JS or even Mozilla specific features to accomplish this as the latest Firefox version is the only target, though basic CSS/HTML rather than such hacks would of course be much preferable!

Original source