CodePen

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>


            
          
!

CSS

            
              $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;
    -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  
  &.step-1 .highlight {
    box-shadow: 
      $padding 0 0 $highlight, 
      -$padding 0 0 $highlight;
  }
  &.step-2 .highlight {
    box-shadow: 
      $padding 0 0 blue, 
      -$padding 0 0 blue;
  }
}

html,
body {
  background: #ccc;
  text-align: left;
  padding: 3%;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var target = document.getElementById("target");

setInterval(function() {
  target.classList.add("step-1");
  target.classList.add("step-2")
  setTimeout(function() {
    target.classList.remove("step-2");
  }, 1000);
  setTimeout(function() {
    target.classList.remove("step-1");
  }, 2000);
}, 3000);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................