Ich füge eine Animationszeile unter dem Titel hinzu. aber kann nicht gut verbreiten - html, css, css-animationen

Ich habe das Problem gegoogelt, konnte aber keine Lösung für das unten erwähnte Problem finden

Hier ist mein Code:

span.line-wrap {
position: relative;
display: inline-block;
}
span.line {
display: inline-block;
position: absolute;
top: 100%;
width: 0;
border-top: 2px solid #666;
-webkit-transition: width 0.5s ease-in;
}
span .line-left {
left: 0;
}
span .line-right {
left: 50%;
}
span.line-wrap:hover span.line {
width: 50%;
}
a {
color: #000;
text-decoration: none;
}
<h2>
<span class="line-wrap">
<span class="line line-left"></span>
<span class="line line-right"></span>
<a href="xxx">Long long long title</a>
</span>
</h2>

Derzeit wird es in eine Richtung wie folgt animiert:

Long long long long title.
----       -----

Aber ich brauche es, um so zu animieren.

Long long long long title.
----------

Ich weiß, dass es für jetzt nicht funktioniert, aber es könnte eine Lösung haben. Aber ich habe keine Ahnung. Bitte geben Sie mir einen Vorschlag.

Vielen Dank

Antworten:

4 für die Antwort № 1

Verwenden Sie ein Pseudoelement und eine Skalierungstransformation anstelle von tatsächlichen unsemantischen Gestaltungsspannen.

h2 {
text-align: center;
}
a {
text-decoration: none;
text-transform: uppercase;
position: relative;
display: inline-block;
color:rebeccapurple
}
a::after {
content: "";
width: 100%;
position: absolute;
top: 100%;
left: 0;
height: 4px;
background: currentColor;
transform: scaleX(0);
transition: transform .35s ease;
}
a:hover::after {
transform: scaleX(1);
}
<h2>
<a href="xxx">title</a>
</h2>


Speisekarte