How can I make a pseudo-element with a background image underlay a heading at all screen sizes?

Issue

The image should always span to width of the h1 text in all sizes. If the text is wrapping, the image should always be a max-width of h1.

I'm having issue with width when copy is long/when it wraps to second line.

https://jsfiddle.net/jp4x2k3t/

h1 {
  font-size: 20px;
}

span.stroke {
  position: relative;
}

span.stroke::after {
  content: "";
  background: url("https://drive.google.com/file/d/1rEVgSDAyjFZHKPHcKHUxTmWj8_VG5f3Y/view?usp=sharing") pink;
  height: 10px;
  width: 100%;
  display: block;
  bottom: 0;
  position: absolute;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100%;
}

<div>
  <h1>
    <span class="stroke">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
  </h1>
</div>

Solution

Why not put the pseudo-element on the primary element? There's no need for extra markup here. You also need to set the stroked element to inline-block. Headings are block-level and spans are inline by default.

.stroke {
  font-size: 20px;
  position: relative;
  display: inline-block;
}

.stroke::after {
  content: "";
  background: url("https://drive.google.com/file/d/1rEVgSDAyjFZHKPHcKHUxTmWj8_VG5f3Y/view?usp=sharing") pink;
  height: 10px;
  width: 100%;
  display: block;
  bottom: 0;
  position: absolute;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100%;
}

div {
  background: #ddd;
}

<div>
  <h1 class="stroke">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</h1>

  <h2 class="stroke">Lorem Ipsum Lorem Ipsum</h2>

  <span class="stroke">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
  
  <p class="stroke">Lorem Ipsum</p>
</div>

Answered By - isherwood