Linkonderstrepingen · vijf varianten New
Five underlines for text links besides the familiar from-the-centre one: enter left and leave right, a highlighter that grows from a thin stroke to behind the text, a line that moves closer under the text, two lines that cross and a wavy line. All variants are CSS on background-size or text-decoration, work on focus and stay a plain underline with reduced motion. For footers, menus and links in articles.
- Tarieven en vergoedingLinks in, rechts uit
- Afspraak makenMarkeerstift
- Route naar de praktijk in LeidenLijn schuift aan
- BehandelingenTwee lijnen
- Veelgestelde vragenGolflijn
How to use it
- Paste the HTML where the components should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- No JavaScript needed.
<!-- 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}}More components
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 →