Как сделать вертикальную линию в html

Question

Ivan Gagarinov · Accepted Answer

Для создания вертикальной линии в HTML можно использовать различные способы, например, с помощью элементов с границей или специальных CSS-стилей. Вот несколько примеров: 1. Используя элемент

с CSS: ```html

``` 2. Используя элемент

с CSS: ```html

``` 3. Используя только CSS: ```html

```

Вячеслав Межуревский · Answer

Для формирования линии можно пойти разными путями. Давайте рассмотрим некоторые из них: Вариант №1. Можно определить обычный div элемент и покрасить у него одну из сторон с помощью свойства border. ```html

``` ```css .create-line { height: 200px; border-left: 3px solid #32a1ce; } ``` Вариант №2. С помощью псевдоэлементов [:before или :after](https://developer.mozilla.org/ru/docs/Web/CSS/::before). Этот вариант немного сложнее, но за то мы обойдемся без правки HTML-кода. Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или с левой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after. ```html

Добавим линию снизу

``` Теперь рассмотрим стили. ```css .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

Ответы

Каталог