text highlighting

by bitstarr

HTML

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

CSS

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

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