Use pseudo-elements to expand hit areas on UI controls

There will be occasions where it is necessary to render a control visually smaller than its optimal click or tap target area, such as a text link within prose or a stack of icon-based buttons. When this is the case, using values such as padding or border will indeed increase the hit area, but also affect the Box Model and hence the Flow. Sometimes this is fine or even preferred, but not always.

The best way to increase the hit area without affecting the layout flow is by defining the control as a relative position container and extending its footprint with a pseudo-element:

button {
  position: relative;
}
button::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
}

You can use this technique to cover the dead pixels between adjacent buttons, or to ensure that all controls have a minimum surface area of 44pt, for example, which is what Apple recommends for optimal use of touch screens.

A caveat is that this technique will impact one's ability to select the text content of the control. However, there is a strong argument for favouring a succesful tap or click over text selection by setting user-select to none in these scenarios, reducing the chance of a miss-hit.