JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>

SCSS

h1 {
  font-weight: 800;
  font-size: 5em;
  line-height: 1.5em;
  color: #fff;
  background-color: deeppink;
}

h1 span {
  position: relative;
  background-color: #232323;
  padding: .5rem 1rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  &:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -10px;
    left: 0;
    height: 10px;
    background-color: deepskyblue;
  }
}