Der Effekt einer am Text haftenden Linie
Posted: 20 Jan 2025, 15:51
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:
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