Der Effekt einer am Text haftenden Linie ⇐ HTML

[Guest]

Ich habe ein Problem, bei dem ich es nicht so anpassen kann, dass es responsiv und für unterschiedliche Textlängen funktioniert, sodass die Zeile immer an das letzte Wort meines h2 angehängt wird.
Das ist wie das auf einem kurzen Text aussieht und wie es aussehen sollte:


Wenn der Text auf Mobilgeräten länger ist, sieht er so aus:


Ich versuche so etwas:

Code: Select all

h2 {
font-size: 56px;
font-weight: 700;
line-height: 67.2px;
color: #1f1f23;
text-transform: uppercase;
width: fit-content;
position: relative;
display: inline-block;
}

h2:after {
content: "";
position: absolute;
bottom: 0px;
right: -15px;
width: 50%;
height: 24px;
background-color: #ff3300;
}

Code: Select all

Newsy