CSS-lab · Tekst-effecten

Marker-highlight

Een schuine acid marker-streep die van links over een woord tekent, plus een violet onderstreep-variant. Pure CSS met ::before en scaleX, met hover-replay.

Gemiddeld
Pure CSS
MIT-licentie
::before
transform: scaleX
transform-origin
skewX
isolation

HTML

<p class="hmt-text">Wij maken websites die <mark class="hmt-mark">echt werken</mark> en merken die je <mark class="hmt-mark hmt-mark--line">niet vergeet</mark>.</p>

CSS

/* Marker-highlight: schuine streep die van links tekent */
.hmt-text {
  --ink: #0C0C0D;
  --marker: #C6FF3D;
  --line: #9B5CFF;
  --skew: -12deg;
  --speed: .9s;
  --delay: .4s;
  max-width: 22ch;
  margin: 0;
  font-family: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  font-size: clamp(28px, 5vw, 60px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ink);
}

.hmt-mark {
  position: relative;
  isolation: isolate;
  padding: 0 .08em;
  background: none;
  color: inherit;
  white-space: nowrap;
}

/* De streep zelf: achter de tekst, start op scaleX(0) */
.hmt-mark::before {
  content: "";
  position: absolute;
  inset: .12em -.1em .02em;
  z-index: -1;
  border-radius: .3em .5em .2em .6em / .5em .3em .6em .3em;
  background: var(--marker);
  transform-origin: left center;
  transform: skewX(var(--skew)) rotate(-1.5deg) scaleX(0);
  animation: hmt-draw var(--speed) cubic-bezier(.7, 0, .2, 1) var(--delay) forwards;
}

/* Variant: smalle streep onderaan, tekent na de eerste */
.hmt-mark--line::before {
  top: 64%;
  background: var(--line);
  animation-delay: calc(var(--delay) + var(--speed));
}

/* Hover: andere animatienaam = opnieuw afspelen */
.hmt-text:hover .hmt-mark::before {
  animation-name: hmt-redraw;
  animation-delay: 0s;
}

.hmt-text:hover .hmt-mark--line::before {
  animation-delay: .25s;
}

@keyframes hmt-draw {
  to { transform: skewX(var(--skew)) rotate(-1.5deg) scaleX(1); }
}

@keyframes hmt-redraw {
  from { transform: skewX(var(--skew)) rotate(-1.5deg) scaleX(0); }
  to { transform: skewX(var(--skew)) rotate(-1.5deg) scaleX(1); }
}

@media (forced-colors: active) {
  .hmt-mark::before { display: none; }
  .hmt-mark { background: Mark; color: MarkText; }
}

@media (prefers-reduced-motion: reduce) {
  .hmt-mark::before,
  .hmt-text:hover .hmt-mark::before {
    animation: none;
    transform: skewX(var(--skew)) rotate(-1.5deg);
  }
}

Wat het is en waar je het gebruikt

Met deze marker-highlight lijkt het alsof iemand met een markeerstift over je kop gaat. Een schuine, licht gekantelde acid-lime streep tekent van links naar rechts onder de woorden echt werken. Kort daarna volgt een smallere violette streep onder niet vergeet. De onregelmatige hoeken geven de streep een handgemaakt gevoel, zonder afbeelding of SVG.

Gebruik het om in een hero-kop, een quote of een belangrijke zin één of twee kernwoorden te laten opvallen. Het is subtieler dan een kleurwissel en trekt de blik precies naar de boodschap die telt.

Zo werkt het

Semantiek: de woorden staan in een <mark>. De standaard gele achtergrond halen we weg met background: none, zodat het pseudo-element de markering overneemt.
De streep: .hmt-mark::before staat absoluut achter de tekst met z-index: -1. Omdat de mark zelf isolation: isolate heeft, blijft de streep wel boven de achtergrond van de pagina.
Handgemaakte vorm: een asymmetrische border-radius met acht waarden en een transform met skewX(var(--skew)) en rotate(-1.5deg) maken de streep schuin en onregelmatig.
Tekenen: de streep begint op scaleX(0) met transform-origin: left center. De keyframes hmt-draw schalen hem naar scaleX(1), met forwards zodat hij blijft staan.
Volgorde: de variant .hmt-mark--line beslaat alleen het onderste deel en krijgt calc(var(--delay) + var(--speed)) als vertraging. Zo tekent hij pas als de eerste klaar is.
Hover-replay: een animatie start opnieuw als de naam verandert. Bij hover op de zin wisselt animation-name daarom naar hmt-redraw, met dezelfde beweging. Zo tekenen de strepen opnieuw.
Niet afbreken: de mark heeft white-space: nowrap. Een absoluut pseudo-element op een inline-element dat over twee regels breekt, gedraagt zich namelijk onvoorspelbaar.

Aanpassen

De variabelen staan op .hmt-text:

--marker: de kleur van de hoofdstreep.
--line: de kleur van de smalle variant.
--skew: hoe schuin de streep staat. Op 0deg wordt hij recht.
--speed en --delay: hoe snel en wanneer de streep tekent.
--ink: de tekstkleur.

Toegankelijkheid en browsersupport

<mark> geeft de markering ook betekenis voor hulpsoftware, niet alleen een visuele stijl. Carbon op acid lime en carbon op violet hebben voldoende contrast. In de modus voor geforceerde kleuren verdwijnt de streep en gebruikt de mark de systeemkleuren Mark en MarkText. Met prefers-reduced-motion: reduce staan de strepen direct in beeld, zonder animatie. Alles werkt in alle actuele browsers.

Verder lezen

Een gemarkeerd kernwoord is een van de simpelste manieren om een kop sterker te maken. Meer tips lees je in ons artikel over hero-secties die converteren. Wil je typografie die zo scherp communiceert op je hele site, kijk dan bij webdesign.

Licentie & credit

Gratis te gebruiken onder de MIT-licentie, ook in commerciële projecten. Een link terug is niet verplicht, maar wordt enorm gewaardeerd:

Credit-link

<a href="https://manifestdigital.nl/css-snippets/highlight-marker-tekst/">Marker-highlight door Manifest Digital</a>

Wil je deze stijl op maat, gekoppeld aan je merk en met scroll-animaties? Bekijk interactief webdesign →

Meer tekst-effecten

Nog meer gedurfde CSS

Tekst-effecten · BeginnerLetter-golfBekijk & kopieer code

Tekst-effecten · GemiddeldTypewriter met knipperende cursorBekijk & kopieer code

Tekst-effecten · GemiddeldOutline-naar-fill tekstBekijk & kopieer code

Alle CSS-snippets →