Wie kann ich Hervorhebungen auf Websites gestalten, so dass es aussieht wie von einem Textmarker markiert?

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

oder

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-Sprache: 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-Sprache: CSS (css)