text.is-highlighted

by jorgeluis

HTML

<h2>
  This should be <span class="is-highlighted">highlighted</span>
</h2>

<p>
  <span class="is-highlighted">best on an inline element</span>
</p>


<div class="dark">

  <p>
    <span class="is-highlighted">Looks ok on a light backgrounds, too</span>
  </p>

</div>

CSS

.is-highlighted {
  padding-right: 0.25em;
  margin-right: -0.15em;
  padding-left: 0.15em;
  margin-left: -0.15em;
  border-radius: 0.5rem 0 1rem 0;
  background-image: 
    linear-gradient(-90deg, 
      rgba(255,210,0,0.15),
      rgba(255,210,0,0.3) 97%, 
      rgba(255,210,0,0.2)
    );
}

.dark {
  background: #eee;
  padding: 2rem;
}