Markering schuift mee door een lijst Nieuw

<!-- Markering schuift mee door een lijst · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hlm">
<div class="hlm__list">
<span class="hlm__mark" aria-hidden="true"></span>
<a class="hlm__row" href="#hv-lijst-markering"><span class="hlm__t">Servicemonteur cv en warmtepomp</span><span class="hlm__m">Apeldoorn · 40 uur</span></a>
<a class="hlm__row" href="#hv-lijst-markering"><span class="hlm__t">Werkvoorbereider installatietechniek</span><span class="hlm__m">Apeldoorn · 32 tot 40 uur</span></a>
<a class="hlm__row" href="#hv-lijst-markering"><span class="hlm__t">Leerling-monteur, bbl niveau 2</span><span class="hlm__m">Deventer · 4 dagen</span></a>
<a class="hlm__row" href="#hv-lijst-markering"><span class="hlm__t">Planner buitendienst</span><span class="hlm__m">Apeldoorn · 24 uur</span></a>
</div>
</div>
</div>

/* Markering schuift mee door een lijst · NedDev · eigen werk. */
.hlm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px 18px;background:#fff;font-family:'Switzer',sans-serif;color:#0a0a0a;container-type:size}
.hlm *,.hlm *::before,.hlm *::after{box-sizing:border-box}
.hlm__list{position:relative;width:100%;max-width:420px;display:flex;flex-direction:column;border-top:1px solid #ebe9e5}
.hlm__mark{position:absolute;left:0;right:0;top:0;height:var(--hlm-h,0px);transform:translateY(var(--hlm-y,0px));background:#f4f3f1;border-left:3px solid #F5480F;border-radius:0 4px 4px 0;opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.2,.7,.3,1),height .28s cubic-bezier(.2,.7,.3,1),opacity .2s ease}
.hlm__mark.is-on{opacity:1}
.hlm.is-fresh .hlm__mark{transition:opacity .2s ease}
.hlm__row{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px 10px 14px;border-bottom:1px solid #ebe9e5;color:inherit;text-decoration:none;outline:none}
.hlm__row:focus-visible{outline:2px solid #F5480F;outline-offset:-2px;border-radius:4px}
.hlm:not(.is-js) .hlm__row:hover{background:#f4f3f1}
.hlm__t{font:500 14px/1.3 'Switzer',sans-serif;min-width:0}
.hlm__m{flex:none;font:400 12px/1.3 'Switzer',sans-serif;color:#6a665f}
@container (max-height:230px){.hlm{padding:8px 14px}.hlm__row{padding:7px 10px 7px 12px}.hlm__t{font-size:13px}}
@container (max-width:380px){.hlm__row{flex-direction:column;gap:1px}}
@media (prefers-reduced-motion:reduce){.hlm__mark{transition:opacity .15s}}

// Markering schuift mee door een lijst · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.hlm');if(!w)return;
var list=w.querySelector('.hlm__list'),mark=w.querySelector('.hlm__mark');w.classList.add('is-js');
function go(row){var fresh=!mark.classList.contains('is-on');w.classList.toggle('is-fresh',fresh);mark.style.setProperty('--hlm-y',row.offsetTop+'px');mark.style.setProperty('--hlm-h',row.offsetHeight+'px');if(fresh){void mark.offsetWidth;w.classList.remove('is-fresh');}mark.classList.add('is-on');}
[].forEach.call(list.querySelectorAll('.hlm__row'),function(r){r.addEventListener('pointerenter',function(){go(r);});r.addEventListener('focus',function(){go(r);});});
list.addEventListener('pointerleave',function(){if(!list.contains(document.activeElement))mark.classList.remove('is-on');});
list.addEventListener('focusout',function(e){if(!list.contains(e.relatedTarget))mark.classList.remove('is-on');});
}
init(document.querySelector('.jouw-container'));