← All elements
<nav class="un"><a href="#">Home</a><a href="#">Work</a><a href="#">Blog</a><a href="#">Contact</a></nav>About this menu
A horizontal menu where an underline grows from the centre under the hovered or focused link.
How it works
Each link has an ::after pseudo-element that is a gradient line scaled to zero width. On hover or keyboard focus the line scales to full width with a transform transition, so it appears to grow. Because the line is inset from the link edges, it lines up neatly with the text.
Ways to customise it
- Change the gradient colours of the underline.
- Set transform-origin to left for a one-direction slide.
- Edit the link padding and font size.
Good to know
Links keep their normal behaviour and the underline responds to :focus-visible as well. The menu wraps on narrow screens.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.