Benutzerdefinierte durchgestrichen auf Text mit zwei Absätzen

Question

So habe ich diese CSS durchgestrichen Animation (auf Hover), aber das Problem ist, dass ich Text auf zwei verschiedenen Zeilen und die Durchstreichung animiert nur auf einer von ihnen (wie Sie sehen können im Bild). Gibt es eine Möglichkeit, das Durchstreichen durch beide Linien zu ziehen, wenn es schwebt?

html

<a href="designer.html"><h1 class="option"><span>The</span><br><span>Designer</span></h1></a> 

Css

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

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

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

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

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

    &:hover:after { 
    background: transparent; 
    width: 100%; 
    transition: 0s; 
    } 
} 

Answer 1

Sie müssen die pseudo-Elemente verwenden & zugehörigen Code auf beiden Spannweiten, dann an den Elternteil das Schweben Trigger bewegen, so dass es aktiviert bei beiden Kindern gleichzeitig.

a { 
 
    text-decoration: none; 
 
} 
 
.option span { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.option span::after, 
 
.option span::before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 0%; 
 
    height: 5px; 
 
    top: 50%; 
 
    margin-top: -0.5px; 
 
    background: red; 
 
} 
 
.option span::before { 
 
    left: -2.5px; 
 
} 
 
.option span::after { 
 
    right: 2.5px; 
 
    background: red; 
 
    -webkit-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); 
 
    transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); 
 
} 
 
.option:hover span:before { 
 
    background: red; 
 
    width: 100%; 
 
    -webkit-transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); 
 
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); 
 
} 
 
.option:hover span:after { 
 
    background: transparent; 
 
    width: 100%; 
 
    -webkit-transition: 0s; 
 
    transition: 0s; 
 
}

<a href="designer.html"><h1 class="option"><span>The</span><br><span>Designer</span></h1></a>