Эффект прилипания линии к тексту ⇐ CSS

[Anonymous]

У меня возникла проблема: я не могу настроить его для адаптивной работы и для текста разной длины, чтобы строка всегда присоединялась к последнему слову моего h2.
Это как это выглядит в коротком тексте и как оно должно выглядеть:


На мобильных устройствах, когда текст длиннее, он выглядит так:


Я пробую что-то вроде этого:

Код: Выделить всё

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;
}

Код: Выделить всё

Newsy

Подробнее здесь: https://stackoverflow.com/questions/793 ... o-the-text