如何在不增加填充的情况下增加元素的可点击区域？

Question

我创建了一个无序列表，并使用CSS相应地设置了样式，以便实现以下客户推荐选择器：

除了一件事，一切似乎都很好 - 当我在手机上查看我的网页时，这些选择器很难点击（你必须非常精确地点击它们才能选择第二个推荐）。

我已尝试增加元素上的填充，但它对我不起作用，因为增加填充会自动增加实际选择器元素的大小...这是我的html＆amp;的CSS：

HTML

<div class="col-xs-8 col-xs-offset-2 text-center indent-bottom">
 <ul>
   <li id="client-1-selector" class="client-selector active-client"></li>
   <li id="client-2-selector" class="client-selector"></li>
   <li id="client-3-selector" class="client-selector"></li>
   <li id="client-3-selector" class="client-selector"></li>
 </ul>
</div>

CSS

.client-selector {
    cursor: pointer;
    list-style: none;
    display: inline-block;
    height: 15px;
    width: 15px;
    background-color: #D9D9D9;
    border-radius: 50%;
}

.client-selector:not(:last-child) {
    margin-right: 14px;
}

.active-client {
    background-color: #E48210;
}

有什么建议吗？谢谢。

Answer 1

尝试这样的事情：

.client-selector { position: relative; }
.client-selector::after {
    content: '';
    position: absolute;
     top: -50%;
    left: -50%;
     width: 200%;
    height: 200%;
}

这会在::after元素周围放置.client-selector个伪元素，宽度和高度的两倍。

Answer 2

使用伪元素可以做到：

• Here是一篇解释细节的文章。

作为建议：

  

这项技术适用于IE8 +