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

Question

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!

Answer 1

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.

Answer 2

You can do it using a bigger padding.

For example:

.a{
    padding: 20px;
    margin: -20px; //lets keep the layout
}

Here you have a living example: http://jsfiddle.net/u5kuJ/1/

Updated:

With your fiddle: http://jsfiddle.net/XXgqu/1/