Onderstreping vanuit midden

Navigatielinks krijgen een oranje streep die vanuit het midden naar beide kanten uitschuift; de actieve pagina houdt hem vast. Pure CSS.

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Geen JavaScript nodig.

<!-- 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}}

Meer uit navigatie & menu's

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →