html - 在不影响布局的情况下使内联链接的可点击区域更大

Question

我希望使链接的可点击区域比它们实际的可访问性更大，因为对于目标用户来说，点击它们可能很困难。大约 1.5 倍的尺寸可能是合适的。这些是普通文本中的链接，因此我实际上无法将它们变大，否则会弄乱布局。

我使用 HTML5、CSS3、JS 甚至 Mozilla 的特定功能来实现这一点，因为最新的 Firefox 版本是唯一的目标，尽管基本的 CSS/HTML 而不是这样的黑客当然会更可取!

Answer 1

一个可行的选择是使用 :after 伪元素。像这样:

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

可以根据需要调整数字。我可以立即看到的唯一缺点是您是否需要支持 IE8 之前的任何内容。 http://caniuse.com/#feat=css-gencontent

这是一个 fiddle .