About this snippet

A paragraph where three phrases are highlighted in turn, each one filling from left to right as if a marker pen were being dragged across it. The sweep runs once on load with a short stagger between the phrases, and every highlight wraps cleanly across line breaks.

Each phrase is a mark element with its default yellow background replaced by a gradient. The gradient is sized to zero width and positioned at the left edge, and an animation grows background-size to the full width, which produces the sweep. Because the background belongs to the inline element, the browser paints it on every line fragment, so a phrase that wraps is highlighted on both lines with no extra markup. The stagger is a longer animation-delay on each mark.

The effect is pure CSS and works in every current browser. Set the delays to zero for a static highlight.

Size
2.0 KB
Uses
HTML, CSS
Loads
Nothing external
Views
59

Collections

Related snippets

<article class="note">
  <p class="label">From the editor</p>
  <p>Good documentation does one job well. It <mark>answers the question the reader arrived with</mark>, it shows a working example before it explains the theory, and it <mark>never makes anyone scroll past a wall of options</mark> to find the default. When those three things are true, <mark>people stop searching and start building</mark>.</p>
</article>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: Georgia, "Times New Roman", serif;
  margin: 0;
  background: #fbfaf7;
  color: #1c1917;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.note {
  max-width: 560px;
  background: #ffffff;
  padding: 44px 48px;
  border-radius: 6px;
  box-shadow: 0 30px 50px -30px rgba(28, 25, 23, 0.35);
}

.label {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a8a29e;
  margin: 0 0 18px;
}

.note p:last-child {
  font-size: 1.25rem;
  line-height: 1.75;
  margin: 0;
}

mark {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(104deg, rgba(253, 224, 71, 0) 1%, rgba(253, 224, 71, 0.85) 3%, rgba(253, 224, 71, 0.65) 97%, rgba(253, 224, 71, 0) 99%);
  background-repeat: no-repeat;
  background-size: 0% 88%;
  background-position: 0 60%;
  padding: 0.1em 0.2em;
  margin: 0 -0.2em;
  border-radius: 0.2em;
  animation: sweep 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: 0.3s;
}

mark:nth-of-type(2) {
  animation-delay: 1.2s;
  background-image: linear-gradient(104deg, rgba(134, 239, 172, 0) 1%, rgba(134, 239, 172, 0.9) 3%, rgba(134, 239, 172, 0.7) 97%, rgba(134, 239, 172, 0) 99%);
}

mark:nth-of-type(3) {
  animation-delay: 2.1s;
  background-image: linear-gradient(104deg, rgba(249, 168, 212, 0) 1%, rgba(249, 168, 212, 0.9) 3%, rgba(249, 168, 212, 0.7) 97%, rgba(249, 168, 212, 0) 99%);
}

@keyframes sweep {
  to { background-size: 100% 88%; }
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save