Onderstreping vanuit midden

Navigation links get an orange line that grows from the centre to both sides; the active page keeps it. Pure CSS.

How to use it

Paste the HTML where the navigation & menus should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
No JavaScript needed.

<!-- Onderstreping vanuit midden · NedDev · eigen werk. -->
<div class="jouw-container">
<nav class="ei-uln" aria-label="Voorbeeldmenu"><a href="#" class="ei-uln__a is-on" aria-current="page">Home</a><a href="#" class="ei-uln__a">Diensten</a><a href="#" class="ei-uln__a">Over ons</a><a href="#" class="ei-uln__a">Contact</a></nav>
</div>

/* Onderstreping vanuit midden · NedDev · eigen werk. */
.ei-uln{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;padding:16px 22px;background:#fff;border:1px solid rgba(10,10,10,.1);border-radius:4px;max-width:88%;box-sizing:border-box}
.ei-uln__a{position:relative;padding:6px 0;font-family:'Switzer',sans-serif;font-weight:500;font-size:15px;color:#0a0a0a;text-decoration:none}
.ei-uln__a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:#F5480F;transform:scaleX(0);transform-origin:50% 50%;transition:transform .35s cubic-bezier(.6,0,.2,1)}
.ei-uln__a:hover::after,.ei-uln__a:focus-visible::after,.ei-uln__a.is-on::after{transform:scaleX(1)}
.ei-uln__a.is-on{font-weight:600}
.ei-uln__a:focus-visible{outline:none}
@media(prefers-reduced-motion:reduce){.ei-uln__a::after{transition:none}}

More navigation & menus

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →