JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox">

<p>
  Lorem ipsum dolor sit amet, <span class="secondary">consetetur sadipscing elitr,</span> sed diam nonumy eirmod <span class="secondary">tempor invidunt</span> ut labore <span class="secondary">et dolore</span> magna aliquyam.
</p>

<p>
  <span class="secondary">Lorem ipsum dolor sit amet.</span>
</p>

CSS

p {
  --line-height: 1.3em;
  line-height: var(--line-height);
}

.secondary {
  display: inline-block;
  max-height: var(--line-height);
  overflow: hidden;

  vertical-align: top;

  background: #f7de93;
}

@keyframes erase {
  0% {
    max-width: 5%;
  }

  100% {
    max-width: 0;
    margin-left: -.275em;
  }
}

input[type="checkbox"]:checked ~ p .secondary {
  animation: erase .25s ease-out forwards;
}