CSS Highlighted Text

demo.html

<p class="title" id="target">
  <span class="highlight">
    DEFAULT: This is how highlighted text usally wraps. It gets tight on the left and right edges.
  </span>
</p>

style.scss

$padding: 0.5rem;
$highlight: #ee4035;

.title {
  font: 2.2rem/1.25 Ubuntu, sans-serif;
  text-transform: uppercase;
  margin-bottom: 1rem;
  
  .highlight {
    display: inline;
    background: $highlight;
    color: white; 
    padding: $padding;
    padding-left: 0;
    padding-right: 0;
    box-shadow: 
      $padding 0 0 $highlight, 
      -$padding 0 0 $highlight;
  }
}

html,
body {
  background: #ccc;
  text-align: center;
  padding: 3%;
}