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

Как вообще можно сделать линию горизонтальную через css!? Давайте попробуем сделать несколько вариантов горизонтальных линий!

В css есть специальный тег, который и обозначает и выводит горизонтальную линию! Это иногда бывает очень полезным!

1. Горизонтальная линия тег hr
2. Стилизация тега hr горизонтальной линии css
3. Горизонтальная линия сплошная - solid
4. Горизонтальная линия точками - dotted
5. Горизонтальная линия пунктирная - dashed
6. Горизонтальная линия сплошная двойная - double
7. Горизонтальная линия с тенью сверху - groove
8. Горизонтальная линия с тенью снизу - ridge
9. Горизонтальная линия под текстом css

Горизонтальная линия html hr

Первое, что сразу приходит на ум это специальный тег, который и сможет сделать нам и показать на экране линию горизонтальную – это конечно не css, но не упомянуть этот вариант никак нельзя! По умолчанию, конечно же тег "hr" - это простая черная горизонтальная линия:


Код горизонтальной линии специальный тег hr

ВНИМАНИЕ! Данный код css тега hr, что приведен ниже - никуда вставлять и копировать не нужно - этот код приведен для понимания, что браузер будет выдавать если он встретит тег <hr>


hr {

display: block;

unicode-bidi: isolate;

-webkit-margin-before: 0.5em;

-webkit-margin-after: 0.5em;

-webkit-margin-start: auto;

-webkit-margin-end: auto;

overflow: hidden;

border-style: inset;

border-width: 1px;

}

Результат вывода тега hr горизонтальной линии




Стилизация тега hr горизонтальной линии css

Но здесь у нас на сайте горизонтальная линия тега hr модифицирована и будет отличаться от вида по умолчанию

Код горизонтальной линии специальный тег hr стилизация css

hr {

background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2), transparent);
border: 0;
height: 1px;
margin: 22px 0 22px 0;box-sizing:
content-box;
display: block;
}

Тег:

<hr>

Результат вывода тега hr горизонтальной линии

---




Горизонтальная линия сплошная - solid

Чуть ниже мы будем использовать начертание горизонтальной линии solid. Есть еще несколько разновидностей начертания: <div style="border-bottom: solid 1px #d71212;">solid</div>




Горизонтальная линия точками - dotted

Что такое dotted - если мы применим к свойству border-bottom значение dotted, то получим горизонтальную линию точками <div style="border-bottom: dotted 2px #d71212;">dotted</div>




Горизонтальная линия пунктирная - dashed

dashed - это значение для свойства border-bottom - которое сделает нашу горизонтальную линию пунктирной <div style="border-bottom: dashed 2px #9EC1D4;">dashed</div>




Горизонтальная линия сплошная двойная - double

Значение double - делает горизонтальную линию двойной

<div style="border-bottom: double 5px #9EC1D4;">double</div>




Тень для горизонтальной линии - groove

Тень для линии - groove, вообще groove переводиться паз, вид линии получается с тенью, groove - тень сверху горизонтальной линии

<div style="border-bottom: groove 2px #9EC1D4;">groove</div>




Горизонтальная линия с тенью снизу - ridge

Тень для линии - ridge, вообще ridge переводится хребет, вид линии получается с тенью, ridge - тень снизу горизонтальной линии

<div style="border-bottom: ridge 5px #9EC1D4;">ridge</div>




Горизонтальная линия под текстом css

Это просто! Выбираем див либо другой двойной тег, в котором будет находиться текст и присваиваем ему любое свойство из выше перечисленных.
Например этот текст помещен в тег div и применим к нему style="border-bottom: ridge 2px red ;"