title: CSS: Background color on text doesn't work when the line breaks in responsive mode
body: <p>I am trying to use a background color on text only, which works fine on single lines, but when the line breaks in responsive mode it ends up looking like this:</p>
  <p><a href="https://i.stack.imgur.com/6itxa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6itxa.png" alt="enter image description here" /></a></p>
  <p>Does anyone know what to add to make the yellow background line follow the text on mulitple lines?</p>
  <p>This is my code:</p>
  <pre><code>.background-highlight {
    position: relative;
      display: inline-block;
      color: #faf9f4;
  }
  
  .background-highlight:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 10px;
    left: 0;
      top: 50%;
    background-color: #cef230;
      z-index: -1;
  }
  </code></pre>
  <p>Thanks a lot in advance,</p>