Горизонтальная линия css, как сделать правильнее (красивее)?

Question

[DmitryRise]

Приветствую, видел много решений при создании вертикальной линии, от тега <hr> до canvas (js).
Какой будет проще всё таки и лучше?
В html book тег <hr> указывается, как устаревший.
Пожалуйста, подскажите современное, красивое и простое решение.

Comments

[Алексей Уколов]

Так вертикальная линия или горизонтальная?

[Сергей delphinpro]

Алексей Уколов: Кто сказал что тег устаревший? Я что-то пропустил?

[Сергей delphinpro]

Это я автору вопроса

[DmitryRise]

Сергей: ок, тег не устаревший. Ошибочка вышла.

[DmitryRise]

Алексей Уколов: горизонтальая

Answer 1

[Алексей Уколов]

Проблема с тегом <hr/> в том, что линия - это не контент, а дизайн. Соответственно, идеально, если дизайн рисуется при помощи css. А уж как конкретно рисовать линию зависит от разметки и дизайна конкретной страницы. Это может быть банальная граница, может быть box-shadow, могут быть псевдоэлементы с фоновой заливкой. Любой из перечисленных вариантов адекватен и имеет право на существование.

P.S. Что-то не вижу, чтобы тег был объявлен устаревшим. Все атрибуты его порезали, но в спеке HTML5 он есть.

Answer 2

[Олег]

Самое простое https://jsfiddle.net/joomla/m12kge1a/1/