Onderstreping over meerdere regels Nieuw

Links in lopende tekst waarvan de onderstreping ook over twee of drie regels netjes meeloopt: groeien van links naar rechts, opvullen als markeerstift, of wegschuiven en terugkomen. Gemaakt met een achtergrondverloop op het inline-element, dus geen extra markup. Voor blogs, kennisbanken en dienstteksten; werkt ook op toetsenbordfocus.

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.

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.
Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.

<!-- 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'));

Meer uit tekstanimaties

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 →