Как сделать вертикальную линию в html
Для формирования линии можно пойти разными путями. Давайте рассмотрим некоторые из них:
Вариант №1.
Можно определить обычный div элемент и покрасить у него одну из сторон с помощью свойства border.
<div class="create-line"></div>
.create-line {
height: 200px;
border-left: 3px solid #32a1ce;
}
Вариант №2.
С помощью псевдоэлементов :before или :after. Этот вариант немного сложнее, но за то мы обойдемся без правки HTML-кода. Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или с левой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.
<div class="create-line-left">
Добавим линию снизу
</div>
Теперь рассмотрим стили.
.create-line-left {
padding-left: 20px;
/* необходим для формирования позиций линии */
position: relative;
/* весь блок будет занимать ширину по размеру контента в нём */
display: inline-block;
}
.create-line-left:before{
content: " ";
background: #33CCFF;
width: 150px;
height: 1px;
/* располагаем линию сверху от текста */
top: 25px;
/* включаем абсолютное позиционирование относительно блока с relative */
position: absolute;
}
Для создания вертикальной линии в HTML можно использовать различные способы, например, с помощью элементов с границей или специальных CSS-стилей. Вот несколько примеров:
Используя элемент <hr> с CSS:
<!DOCTYPE html> <html> <head> <style> .vertical-line { border-left: 1px solid black; height: 100px; /* Высота линии */ } </style> </head> <body> <div class="vertical-line"></div> </body> </html>Используя элемент <div> с CSS:
<!DOCTYPE html> <html> <head> <style> .vertical-line { border-left: 1px solid black; height: 100px; /* Высота линии */ } </style> </head> <body> <div class="vertical-line"></div> </body> </html>Используя только CSS:
<!DOCTYPE html> <html> <head> <style> .vertical-line { width: 1px; height: 100px; /* Высота линии */ background-color: black; display: inline-block; } </style> </head> <body> <div class="vertical-line"></div> </body> </html>