Extend the “hoverable” area of an element

Posted on Mar 25, 2025

by Jimmy

Last updated on June 18, 2025

CSS

Trick to extend the "hoverable" area of an element using a pseudo element.

CSS 
        
            a {
    position: relative;

    &::before {
        content: "";
        display: block;
        height: 40px; // <-- Adjust this to fit your needs
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
}

To use with our boilerplate, add this code to the .menu-item a element.

Back to Snippets