Onderstreping over meerdere regels New

Links in running text whose underline follows neatly across two or three lines: growing left to right, filling like a highlighter, or sliding out and back in. Made with a background gradient on the inline element, so no extra markup. For blogs, knowledge bases and service copy; also works on keyboard focus.

Twijfelt u tussen een warmtepomp of een hybride oplossing voor uw jaren dertig woning? Lees dan eerst ons overzicht van de subsidies die in 2026 nog gelden in Utrecht, of plan een gratis adviesgesprek bij u thuis.

Beweeg over de links of tab erdoorheen.

How to use it

Paste the HTML where the text animations should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Onderstreping over meerdere regels · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="lom">
  <p class="lom__p">Twijfelt u tussen een <a class="lom__a lom__a--groei" href="#lom-1">warmtepomp of een hybride oplossing voor uw jaren dertig woning</a>? Lees dan eerst ons <a class="lom__a lom__a--stift" href="#lom-2">overzicht van de subsidies die in 2026 nog gelden in Utrecht</a>, of <a class="lom__a lom__a--wissel" href="#lom-3">plan een gratis adviesgesprek bij u thuis</a>.</p>
  <p class="lom__uitleg">Beweeg over de links of tab erdoorheen.</p>
</div>
</div>

/* Onderstreping over meerdere regels · NedDev · eigen werk. */
.lom{position:absolute;inset:0;container-type:inline-size;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:16px 22px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#fff;text-align:left}
.lom__p{margin:0;font-size:clamp(15px,4.4cqw,18px);line-height:1.6;max-width:36ch}
.lom__uitleg{margin:0;font-size:12px;color:#5b5b5b}
.lom__a{color:#0a0a0a;font-weight:600;text-decoration:none;background-repeat:no-repeat;padding-bottom:2px;border-radius:2px}
.lom__a:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px}
.lom__a--groei{background-image:linear-gradient(#F5480F,#F5480F),linear-gradient(rgba(10,10,10,.3),rgba(10,10,10,.3));background-size:0% 2px,100% 1px;background-position:0 100%,0 100%;transition:background-size .55s cubic-bezier(.65,0,.35,1)}
.lom__a--groei:hover,.lom__a--groei:focus-visible{background-size:100% 2px,100% 1px}
.lom__a--stift{background-image:linear-gradient(#fcd5c4,#fcd5c4);background-size:100% 3px;background-position:0 100%;transition:background-size .35s ease}
.lom__a--stift:hover,.lom__a--stift:focus-visible{background-size:100% 100%}
.lom__a--wissel{background-image:linear-gradient(#F5480F,#F5480F);background-size:100% 2px;background-position:100% 100%}
.lom__a--wissel:hover,.lom__a--wissel:focus-visible{animation:lom-wissel .7s cubic-bezier(.65,0,.35,1) both}
@keyframes lom-wissel{0%{background-size:100% 2px;background-position:100% 100%}50%{background-size:0% 2px;background-position:100% 100%}50.01%{background-size:0% 2px;background-position:0 100%}100%{background-size:100% 2px;background-position:0 100%}}
@media (prefers-reduced-motion:reduce){.lom__a{transition:none!important;animation:none!important}}

// Onderstreping over meerdere regels · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root.querySelectorAll('.lom__a').forEach(a => a.addEventListener('click', e => e.preventDefault()));
}
init(document.querySelector('.jouw-container'));

More text animations

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 →