В Codepen представлено 4 метода создания подчеркивающей линии для заголовков на уровне текста. Важное отличие в отображении можно заметить в мобильном варианте.

1. Первый метод реализован за счет связки relative-absolute и созданием псевоэлемента after. В мобильном виде текст подчеркивается не весь, а лишь создается нижняя подчеркивающая линия, по аналогии с border-bottom;
2. Второй метод реализован через отрисовку линии из фрагмента изображения, размер которого задан через background-size. В мобильном виде подчеркивается весь текст при переносе содержимого.
3. Третий и четвертый методы схожи по стилизации, но совершенно отличаются поведением отрисовки. Важную роль играет сущность элемента, для которого реализован стиль. Блочный элемент в мобильном виде подчеркивает весь блок текста, а строчный — каждую строку при переносе текста. Обратите внимание на ширину линии в последних двух примерах.

Чтобы рассмотреть результат в полноэкранном виде, жми на кнопку Посмотреть

See the Pen underline for headings by Anna Blok (@anna_blok) on CodePen.0