Bracket hover marks

microinteraction · navigation · hover — trigger: hover or tab the links

Brackets close around the label instead of underlining it.

Two pseudo-elements, four pixels wide, with one border side dropped so each reads as a bracket. They slide in from twenty pixels out and fade at the same time. The label is untouched — no weight change, no underline, no reflow — so a dense nav bar stays perfectly still while the pointer moves through it.

The first link carries aria-current="page", so its marks stay closed permanently — the same visual doing double duty as the active-page indicator.

default

Collection

heavier arms

Collection

longer travel

Collection

on a large label

Collection
Hover me at size
4px
14px
5px
20px
400ms
the label never moves