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

Question

[Максим Иванов]

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

Answer 1

[ZB Venom]

Comments

[Максим Иванов]

по краям

[ZB Venom]

Максим Иванов, так?

[Максим Иванов]

ZB Venom, а можно это как-то бордером сделать?

[ZB Venom]

Максим Иванов, сделал второй вариант с border-top: solid 1px;

Answer 2

[Ankhena]

Просто псевдо, в нем черный фон и градиент высотой в одну точку.
Прямо в этом же div можно писать текст. Псевдо, при необходимости, можете двигать абсолютом.
Никаких лишних блоков для этого создавать не нужно.
https://jsfiddle.net/25gLvr6s/

background: #000 linear-gradient(to right, transparent, darkred, transparent) no-repeat left center / 100% 1px;

Можно сделать и без псевдо, для этого нужно заменить черный цвет на градиент из черного в черный. Но тогда нужно четко знать положение черного и попадать в его середину красным градиентом.

Вот так: https://jsfiddle.net/ayc3hbo6/

Answer 3

[Lord_Dantes]

Псевдо-элемент ::before с высотой 1px и градиентным фоном.

Comments

[Максим Иванов]

Ну это есть, а вот градиент не знаю как