Custom strikethrough on hover with text that has two paragraphs
<p>So I got this css strikethrough animation (on hover) but the problem is that I have text on two different lines and the strikethrough only animates on one of them (as you can see in the image). Is there a way to make the strikethrough go through both lines when its hovered?</p>

<p><img src="https://i.stack.imgur.com/QIm7x.png" alt="Strikethrough"></p>

<p>html</p>

<pre><code>&lt;a href="designer.html"&gt;&lt;h1 class="option"&gt;&lt;span&gt;The&lt;/span&gt;&lt;br&gt;&lt;span&gt;Designer&lt;/span&gt;&lt;/h1&gt;&lt;/a&gt;
</code></pre>

<p>css</p>

<pre><code>.options{
  margin-top: 100px;
  .option {
    span {
      cursor: pointer;
      position: relative;
      .strikethrough;
    }
  }
}

.strikethrough {
  &amp;::after, &amp;::before {
    content: '';
    position: absolute;
    width: 0%;
    height: 5px;
    top: 50%;
    margin-top: -0.5px;
    background: @accent_color;
  }

  &amp;::before {
    left: -2.5px;
  }

  &amp;::after {
    right: 2.5px;
    background: @accent_color;
    transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  &amp;:hover:before {
    background: @accent_color;
    width: 100%;
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  &amp;:hover:after {
    background: transparent;
    width: 100%;
    transition: 0s;
  }
}
</code></pre>