Linkonderstrepingen · vijf varianten Nieuw
Vijf onderstrepingen voor tekstlinks naast de bekende vanuit-het-midden: binnenkomen links en vertrekken rechts, een markeerstift die van een dunne streep tot achter de tekst groeit, een lijn die dichter onder de tekst schuift, twee lijnen die elkaar kruisen en een golflijn. Alle varianten zijn CSS op background-size of text-decoration, werken bij focus en blijven bij minder beweging als gewone onderstreping. Voor footers, menu's en links in artikelen.
- Tarieven en vergoedingLinks in, rechts uit
- Afspraak makenMarkeerstift
- Route naar de praktijk in LeidenLijn schuift aan
- BehandelingenTwee lijnen
- Veelgestelde vragenGolflijn
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.
<!-- Linkonderstrepingen · vijf varianten · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hls">
<ul class="hls__list">
<li class="hls__row"><a class="hls__a hls__a--door" href="#hv-link-set">Tarieven en vergoeding</a><span class="hls__k">Links in, rechts uit</span></li>
<li class="hls__row"><a class="hls__a hls__a--stift" href="#hv-link-set">Afspraak maken</a><span class="hls__k">Markeerstift</span></li>
<li class="hls__row"><a class="hls__a hls__a--dicht" href="#hv-link-set">Route naar de praktijk in Leiden</a><span class="hls__k">Lijn schuift aan</span></li>
<li class="hls__row"><a class="hls__a hls__a--dubbel" href="#hv-link-set">Behandelingen</a><span class="hls__k">Twee lijnen</span></li>
<li class="hls__row"><a class="hls__a hls__a--golf" href="#hv-link-set">Veelgestelde vragen</a><span class="hls__k">Golflijn</span></li>
</ul>
</div>
</div>/* Linkonderstrepingen · vijf varianten · NedDev · eigen werk. */
.hls{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px 22px;background:#fff;font-family:'Switzer',sans-serif;color:#0a0a0a;container-type:size}
.hls *,.hls *::before,.hls *::after{box-sizing:border-box}
.hls__list{list-style:none;margin:0;padding:0;width:100%;max-width:400px;display:flex;flex-direction:column;gap:4px}
.hls__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:3px 0;border-bottom:1px solid #ebe9e5}
.hls__row:last-child{border-bottom:0}
.hls__k{flex:none;font:400 12px/1.2 'Switzer',sans-serif;color:#6a665f}
.hls__a{position:relative;display:inline-block;padding:4px 0;color:#0a0a0a;font:500 15px/1.3 'Switzer',sans-serif;text-decoration:none;outline:none;background-repeat:no-repeat;background-origin:content-box;background-clip:content-box}
.hls__a:focus-visible{outline:2px solid #F5480F;outline-offset:2px;border-radius:2px}
.hls__a--door{background-image:linear-gradient(#F5480F,#F5480F);background-size:0 2px;background-position:100% 100%;transition:background-size .32s cubic-bezier(.65,0,.35,1)}
.hls__a--door:hover,.hls__a--door:focus-visible{background-size:100% 2px;background-position:0 100%}
.hls__a--stift{background-image:linear-gradient(#ffd3c2,#ffd3c2);background-size:100% 3px;background-position:0 100%;transition:background-size .28s cubic-bezier(.2,.7,.3,1)}
.hls__a--stift:hover,.hls__a--stift:focus-visible{background-size:100% 100%}
.hls__a--dicht{text-decoration:underline;text-decoration-thickness:1.5px;text-decoration-color:rgba(10,10,10,.28);text-underline-offset:7px;transition:text-underline-offset .25s cubic-bezier(.2,.7,.3,1),text-decoration-color .25s}
.hls__a--dicht:hover,.hls__a--dicht:focus-visible{text-underline-offset:2px;text-decoration-color:#F5480F}
.hls__a--dubbel{background-image:linear-gradient(#0a0a0a,#0a0a0a),linear-gradient(#F5480F,#F5480F);background-size:0 1.5px,0 1.5px;background-position:0 calc(100% - 4px),100% 100%;transition:background-size .34s cubic-bezier(.65,0,.35,1)}
.hls__a--dubbel:hover,.hls__a--dubbel:focus-visible{background-size:100% 1.5px,100% 1.5px}
.hls__a--golf{text-decoration:underline;text-decoration-style:wavy;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:transparent;transition:text-decoration-color .25s}
.hls__a--golf:hover,.hls__a--golf:focus-visible{text-decoration-color:#F5480F}
@container (max-height:230px){.hls{padding:8px 16px}.hls__list{gap:0}.hls__row{padding:1px 0}.hls__a{font-size:14px;padding:3px 0}}
@container (max-width:380px){.hls__k{display:none}}
@media (prefers-reduced-motion:reduce){.hls__a{transition:none}}Meer uit componenten
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 →