Как сделать горизонтальною линию разной толщины на чистом CSS?

Чтобы сделать горизонтальную линию разной толщины на чистом CSS, можно использовать свойство height для элемента <hr>. www.w3docs.com

Пример кода для изменения толщины и цвета фона горизонтальной линии: www.w3docs.com

hr {   width: 100%;   height: 30px;   margin-left: auto;   margin-right: auto;   background-color: #b7d0e2; } 

Также для удаления границы у толстой горизонтальной линии можно установить свойство border в значение «none». www.w3docs.com Пример кода: www.w3docs.com

hr {   width: 100%;   height: 30px;   margin-left: auto;   margin-right: auto;   background-color: #b7d0e2;   border: 0 none; } 

Ещё один вариант — использовать псевдоэлементы :before и :after. ru.hexlet.io Если нужно разместить горизонтальную линию сверху или с левой стороны элемента, то следует использовать псевдоэлемент :before, если справа или снизу — псевдоэлемент :after. ru.hexlet.io