A marker that draws itself

Why a marker

When I read on paper, I underline. A pen in one hand, the page in the other, and the important lines get a stroke of colour. On screens that gesture is gone, so I wanted this site to bring a bit of it back: a Usually more than once.highlighter that draws itself the moment a line scrolls into view.

The trick

The basic idea needs no image and no canvas: a background gradient behind the text that starts at zero width and grows to full width. The browser animates the size, the text stays selectable, and screen readers never notice. This site uses a small library that draws a rougher, hand-made stroke, but the principle is the same.

.highlight {
  background: linear-gradient(transparent 55%, #ffe58a 55%) no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.6s ease-out;
}

.highlight.is-visible {
  background-size: 100% 100%;
}

A small script adds the class when the line enters the screen. Three details make it feel like a pen instead of a progress bar:

• the stroke sits low, so it covers the lower half of the letters
• it eases out, fast at the start and slow at the end
• with reduced motion turned on, the stroke is simply there

What it costs

Almost nothing. The plain CSS version needs no library and no images, and the page works the same without JavaScript, the marker just stays hidden.

9 lines

of CSS

0 KB

extra images

0.6 s

per stroke

Select any text on this page and the marker takes over from the browser's selection colour, so reading and highlighting feel like the same tool.