Как бы вы добавили эту горизонатльную полоску под надписью?

Question

[Tssyue]

Comments

[Vadim Bogomazov]

Добавил бы через :after.

[Сергей delphinpro]

Это чисто оформительская хренька. Засорять разметку ради нее не стоит. Поэтому единственно верное решение (на мой взгляд, конечно) – псевдоэлемент заголовка.

Answer 1

[Дмитрий Кузнецов]

Например:
1. Создать под текстом div.
2. Указать ему border-bottom: 2px solid #e3e3e3; (параметры на своё усмотрение).
3. Добавьте margin по усмотрению.
4. Указать нужную ширину.
5. Профит!

Comments

[Александр]

Чем не угодил <hr /> или :after/:before?

[Дмитрий Кузнецов]

Александр, можно и так. Возможно, так и правильнее. Я указал только как один из примеров.

[Ankhena]

div - лишний.
Это украшение, его не должно быть в разметке.
Лучше всего это делать псевдоэлементом.
Ну или просто кусочком фона в виде линейного градиента, совсем легко.

Answer 2

[Сергей Кутузов]

<hr style="width:50px;height:3px;background:red;text-align:center;">