How to create a highlighter marker effect in CSS
In this article Max explains how to build a highlighter marker effect using only CSS.
The result is a nice looking effect to spice up the default highlighting style of the <mark>
element.
This is the resulting CSS code from the article (now integrated in the blog here):
mark { margin: 0 -0.4em; padding: 0.1em 0.4em; border-radius: 0.8em 0.3em; background: transparent; background-image: linear-gradient( to right, rgba(255, 225, 0, 0.1), rgba(255, 225, 0, 0.7) 4%, rgba(255, 225, 0, 0.3) ); -webkit-box-decoration-break: clone; box-decoration-break: clone; }