← All elements
<nav class="ug"><a>Home</a><a class="on">Library</a><a>Pricing</a><a>Docs</a></nav>About this hover effect
Links with an accent underline that grows from the centre outward on hover and stays on the current page.
How it works
Each link has a pseudo-element underline that is centred with translateX and scaled to zero width. Hovering, or the current class, scales it to full width, so it grows outward from the middle with a slight overshoot easing.
Ways to customise it
- Change #0d9488 to recolour the line.
- Move the line above the text by using top.
- Use transform-origin left for a left-to-right wipe.
Good to know
Mark the current page with aria-current in real navigation. Colour is not the only cue because the underline also appears.
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.