Как сделать подчеркивание текста для последней строки?

Question

[Евгений Питаев]

Для заголовков используется подчеркивание всего блока, а для самого текста заголовка обернутого в span отдельное подчеркивание.

<h1><span class="title-border">Комплексная интерпретация. Решение системы уравнений</span></h1>

h1 {
font-weight: 300;
font-size: 36px;
text-transform: uppercase;
color: #4F4F4F;
}
.title-border {
border-bottom: solid 2px #0094E0;
}

Все хорошо до того момента, когда заголовок не становиться длиннее одной строки, потом стили ломаются
Как исправить это, сделать подчеркивание только для последней строки

Comments

[YemSalat]

Так и не понял в чем там проблема

[YemSalat]

Почему не поставить класс .title-border прямо на h1 ??

[Евгений Питаев]

@YemSalat: у h1 просто серая полоса, а у .title-border голубая и она только для текста, а серая полоса h1 для всего блока, по задумке должно быть так test2.itcentre.ru/prime-system/solutions.html

[YemSalat]

Евгений Питаев: Так а как должно то быть? Так? i.imgur.com/4QbVtHM.png

[Евгений Питаев]

@YemSalat: да

Answer 1

[Виталий Киренков]

.title-border { display: block;}
Возможно так... Или покажите дизайн, а то как то странно...

Comments

[Евгений Питаев]

test2.itcentre.ru/products/reshenie-sistemy-uravne...

[Виталий Киренков]

Евгений Питаев: codepen.io/vitaliy_kirenkov/pen/bILdf
Костыль, но работает =))

[Виталий Киренков]

@SelenIT2: Чё то не разобрался до конца как эта магия работает, но круто =))

[Виталий Киренков]

SelenIT2: ааа, афтер он же за конец цепляется... теперь ясно. Я изначально не понял, что его заставляет подтягиваться за текстом

Answer 2

[Александр Цымбал]

или, даже вернее
.title-border { display: inline-block;}

Comments

[Евгений Питаев]

как вариант можно так

[Александр Цымбал]

ну, сделать подчеркивание по ширине последних двух слов - нереально. только если скрипт написать, который будет разделять строку на слова, потом складывать ширины каждого слова, и если ширина превышает ширину блока - значит после этого слова делать еще одну обертку, которая будет подчеркивать.
Ну, оно того не стОит. Лучше упростить дизайн или смириться с inline-block