Using pseudo-elements to define hit areas

Pseudo-elements are a powerful yet underused feature of CSS. If you design for the web, you’ve probably at least used them for clear-fixing or creating complex shapes, but there are so many more practical uses if we explore just a little outside of the box.

One application of a pseudo-element is to define an invisible hit area around an interactive element, like so:

element {
    position: relative;
    display: block;
    width: 320px;
    height: 44px;
element::after {
    content: '';
    position: absolute;
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;

This creates invisible bounds that extend from all edges of the element by 12 pixels. No matter what you do to the original element, so long as its position is anything other than static, it will maintain the extended hit area.

A good use case for this is to guard against the dead pixels between navigational items so that the chance of missing them—especially via touch input—is reduced.

Note that as above, CSS Selectors Level 3 specifics a syntactical difference between pseudo-elements and pseudo-classes:

A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements.

This is just one way that I take advantage of pseudo-elements in my work, every day. Over the next couple of weeks, I’ll publish some more of my favourites.