Как сделать линию подчеркивания под заголовком и задать ей длину?

Question

[Star Trooper]

Добрый день всем.
Во время верстки столкнулся с такой задачкой, есть текст а под ним линия подчеркивания. (картинка внизу)
Как задать ей длину?
На сколько я понял через border-bottom это невозможно, то есть нет тега где я в px могу задать конкретную длину. По логике, как я понимаю, я должен для линии задать отдельный div и этому div задать width, который мне нужен. А уже в этот div вставить border-bottom, так как он всегда автоматически растягивает по длине блока, в который он был вложена.
Верно ли я мыслю или есть проще вариант?
Спасибо.

Answer 1

[AlexRas]

https://jsfiddle.net/x1j5f9z1/2/

Comments

[Star Trooper]

Алекс, спасибо за пример.
Если не трудно могли бы вы продемонстрировать пример с ::before, потому как еще не слишком хорошо знаком с псевдоэлементами. Спасибо.

[Star Trooper]

И еще один момент, я вижу, что все работает, как вы сделали, но не могу понять, где в css или html тег/селектор, который создает саму линию. То есть я понимаю, что с помощью height: 1px вы задали ширину, но сама линия за счет чего появляется?

[gassmonkey]

Star Trooper: Псевдоэлемент :after.

[Star Trooper]

gassmonkey: да это я понял.
Просто не пойму за счет чего создается сама линия.
Например если бы стоял border тогда яснопонятно, а так не понимаю, что псевдоэлемент по умолчанию их создавал. Не могу найти где про это написано или можно прочесть.

[AlexRas]

a@FirstTime: просто поменяй after на before и будет пример с ним

[AlexRas]

Star Trooper: сама линия создается за счет того что высоту псевдоэлемента сделал 1px и установил фон

[gassmonkey]

Star Trooper: Псевдоэлементу заданы ширина, высота, и цвет фона. Что здесь непонятного?

[DimDim7778]

спасибо!

[RusticAnd]

AlexRas, а просто код не судьба вставить? без этих недоредакторов

[AlexRas]

RusticAnd, видать не судьба

[RusticAnd]

AlexRas, ага... логично что через время все эти ссылки будут не рабочие, а тема актуальна всегда

Answer 2

[Nikolay Talanov]

Используйте псевдоэлемент :before/:after с абсолютным позиционированием и извращайтесь с ним как хотите.