Wie erhöht man die anklickbare Fläche eines Elements, ohne seine Polsterung zu erhöhen?

Question

Ich habe eine ungeordnete Liste erstellt und gestylt es CSS, um die folgenden Customer Testimonial Selektoren zu erreichen dementsprechend mit:

Alles scheint in Ordnung zu sein, außer einer Sache - wenn ich sehe meine Webseite auf dem Handy Diese Selektoren sind sehr schwer zu klicken (Sie müssen sehr genau klicken, um das zweite Testimonial auszuwählen).

Ich habe versucht, auf das Element padding zu erhöhen, aber es wäre nicht für mich arbeiten, weil die Erhöhung der Polsterung automatisch die Größe des tatsächlichen Auswahlelement erhöht ... Hier ist mein html & 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; 
} 

Irgendwelche Vorschläge? Vielen Dank.

Answer 1

Mit Pseudo-Elemente können Sie es tun:

• Here ein Artikel über die Details erläutern.

Als Rat:

Diese Technik funktioniert IE8 +

Answer 2

so etwas wie dieses Versuchen:

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

Dies wird ein ::after Pseudoelement um Ihre .client-selector Elemente setzen das ist die doppelte Breite und Höhe.