Highlighter CSS Styling

example.html

<p>
    Did you know that <span class="highlight">all goats</span> like eating their own hats?
</p>

highlight.css

/* I found this on https://statamic.com/why and it was beautiful. */
.highlight {
    background-image: linear-gradient(-100deg,hsla(58,92%,75%,.3),hsla(58,92%,75%,.7) 95%,hsla(58,92%,75%,.1));
    border-radius: 1em 0;
    padding: 0 .35em;
    margin: 0 -.35em;
}