使在线链接的可点击区域更大而不影响布局 [英] Making the clickable area of in-line links bigger without affecting the layout

问题描述

我想让链接的可点击区域比他们实际上是无障碍的，因为对于目标用户，可能很难击中他们。大约1.5x的尺寸可能是合适的。

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.

我使用HTML5，CSS3，JS或甚至Mozilla的特定功能，这些都是正常文本中的链接，因此我不能使它们更大，这是因为最新的Firefox版本是唯一的目标，虽然基本的CSS / HTML而不是这样的黑客当然是更可取的！

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!

推荐答案

一个可能工作的选项是使用：之后伪元素。像这样：

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;
} 

您可以随意调整数字。只有缺点，我可以立即看到是如果你需要支持任何前IE8。 http://caniuse.com/#feat=css-gencontent

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

以下是小提琴。

这篇关于使在线链接的可点击区域更大而不影响布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！