Increasing hover area of CSS circle [duplicate]

Question

I have a page with little elements with border-radius set to 50%, so they show up as little dots:

CSS:

.star {
    width: 5px;
    height: 5px;
    background-color: rgb(236, 236, 236);
    position: absolute;
    border-radius: 50%;
    transform: scale(1);
    display: block;
    transition: 0.25s ease-in background-color, 0.25s ease-in opacity, 0.25s ease-out transform;
    cursor: pointer;
}

Each of these has a hover action that brings up a certain pop-up. Now however, there's an issue where hovering (at least in the browsers I've tested for) is a game of find the pixel.

Is there a "trick" to add an invisible border or so to the dots to make them more selectable without hunting for pixels?

Setting border to say 2px solid transparent just makes the circles bigger in my tests, and CSS outline does not produce a :hover state or mouseenter event.

Answer 1

Use a pseudo-element to increase the "hit area"

body {
  background: #000;
}

.star {
  width: 5px;
  height: 5px;
  background-color: rgb(236, 236, 236);
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: scale(1);
  display: block;
  transition: 0.25s ease-in background-color, 0.25s ease-in opacity, 0.25s ease-out transform;
  cursor: pointer;
}

.star::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 500%;
  height: 500%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index:-1;
  border:1px solid green; /* for demo purposes */
  
}

.star:hover {
  background: #f00;
}

<div class="star"></div>