Opens in a new tab

How can I format text on websites so that it looks like it's been highlighted with a highlighter?

mark {
  background: linear-gradient(104deg,
    transparent 2%, #ffe066 4%,
    #ffe066 94%, transparent 96%);
  padding: 0 4px;
  border-radius: 2px;
}Code language: CSS (css)

or

mark { position: relative; background: none; }
mark::before {
  content: '';
  position: absolute;
  inset: 2px -3px 0;
  background: #ffe066cc;
  transform: skewX(-4deg) rotate(-0.4deg);
  border-radius: 2px;
  z-index: -1;
}Code language: CSS (css)

oder etwas subtiler

mark { position: relative; background: none; }
mark::before {
  content: '';
  position: absolute;
  left: -2px; right: -2px;
  bottom: 1px; height: 40%;
  background: #ffd60099;
  z-index: -1;
}Code language: CSS (css)