Making the clickable area of in-line links bigger without affecting the layout

Question

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 siz

Answer 1

You can use the :after pseudo-element to pad the element, and using transform and position you can position the padding centered on the center of the element without impacting other elements.

Change the padding: 30px to whatever padding you need.

.padded-click {
  position: relative; 
}
.padded-click:after{
  padding: 30px;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Note: This is based on gotohales solution, which is a great approach, however using top and left with pixels values as gotohales solution does requires taking into account the width/height of the element we're padding otherwise the padding will be off center.