Как сделать вертикальную линию css html
"Вертикальная линия" - как сделать вертикальную линию на сайте? Сколько способов существует для создания вертикальной линии? Примеры вертикальных линий. Вертикальная линия через псевдоэлемент. Сделать вертикальную линию через "before".
Подробно о том как сделать вертикальную линию
- Создаем вертикальную линию в блоке.
- Сделать вертикальную линию в блоке справа.
- Сделать вертикальную линию используя псевдоэлемент
- Пример вертикальной линии используя before Скачать пример
Создаем вертикальную линию в блоке.
Как вы знаете, что существует "3 способа css" - здесь будем использовать - размещение стилей прямо внутри тега, в атрибуте attribute style
Для того, чтобы создать вертикальную линию, нам понадобится блок html? пусть это будет div
Чтобы мы могли его увидеть - давайте напишем какой-то текст и покрасим с помощью background
Результат:
Далее нам нужно (например), сделать вертикальную линию у этого блока, поэтому мы добавим ему свойство border и добавим ему "left"
Что получили?
Вообще не совсем презентабельно! Добавим отступы с помощью padding:
Результат... уже немного получше!
Итого - получилась вертикальная линия слева:
Для создания вертикальной линии.
Когда требуется как-то выделить текст на странице.
Не обязательно делать такой задний фон, это просто применено в качестве примера!
Далее сделаем что-то повеселее!
Сделать вертикальную линию в блоке справа.
Здесь особой разницы нет, как делать вертикальную линию, справа или слева.
Самое главное, чтобы это выглядело красиво и презентабельно !
Давайте сделаем такую "вертикальную линию справа"
Для этого опять возьмем тег div и добавим ему класс - "vertical_line"
Пропишем стили css для этого класса уже вторым способом внутри attribute style
Изменим вырвиглаз задний фон на "background: #f5f5f5;"
Вертикальную линию поставим справа : "border-right: 2px solid #010101;"
Увеличим отступы внутри "padding: 20px 33px;"
Текст поставим также справа:"text-align: right;"
Добавим "font-family: cursive;"
И добавим наружные отступы, чтобы наш блок не прилипал к верху и низу, используем margin : margin: 20px 0;
Соберем все стили для вертикальной линии:
.vertical_line{
background: #f5f5f5;
border-right: 2px solid #010101;
padding: 20px 33px;
text-align: right;
font-family: cursive;
margin: 20px 0;
}
</style>
Результат использования вертикальной линии в теге
Как мне кажется - получилось терпимо!
Еще раз повторю, что следует разбавлять однотонный текст, каким-то фишками!
Когда очень много текста, без каких либо вкраплений - это очень тяжело читается! Как вариант, можно использовать вертикальную линию в теге.
Или тот же текст с вертикальной линией слева:
Как мне кажется - получилось терпимо!
Еще раз повторю, что следует разбавлять однотонный текст, каким-то фишками!
Когда очень много текста, без каких либо вкраплений - это очень тяжело читается! Как вариант, можно использовать вертикальную линию в теге.
Сделать вертикальную линию используя псевдоэлемент.
Отвечаю на один из поисковых запросов: "Сделать вертикальную линию используя псевдоэлемент." :
Псевдоэлемент(before, after) - это не самый распространенный способ создания чего либо!
Этот элемент не всегда удобен для стилизации.
Я бы его не стал у себя на сайте делать вертикальную линию с помощью псевдоэлемента.
Но если очень хочется и очень нужно... то часто можно сделать невозможное!
Вертикальная линия с помощью before
<div class="vertical_line_before">текст</div>
Css:
<style>
.vertical_line_before:before {
content: '';
border: 1px solid red;
display: inline-block;
height: 198px;
position: absolute;
margin: 0 0 0 -20px;
}
</style>
Пример вертикальной линии с помощью псевдоэлемента before
Которая сделана с помощью псевдоэлемента before.
Если честно... то это вообще первый раз начиная с 2007 года, когда я начал изучать html и css.
Слышу про необходимость создания вертикальной линии таким образом.
Специально пошел поискать по интернету, но какого-то внятного ответа не нашел...
Потому, что... так реально никто не делает - это просто неудобно!
Пример вертикальной линии используя before
Когда я писал выше приведенные слова, то я имел ввиду использовать псевдоэлементы для больших блоков.
Но если вам требуется использовать "псевдоэлемент" построчно - то такой вариант можно использовать.
Например...
Вам требуется создать нумерованный список с числами и вертикальной линией...
То для этих целей вертикальная полоса с "псевдоэлементом вполне возможно для использования!"
Здесь вы видите, что достаточно вывести новую строку, и ваша вертикальная линия появляется автоматически!
Скачать пример с вертикальной линией before
Данный пример я оформил в отдельный архив!
Вы его можете скачать здесьПосле того, как вы поставите себе на сайт эту страницу, то вы сможете увидеть вертикальную линию before :
Код примера с вертикальной линией before
В примере использован вот этот код с вертикальной линией before
<div class="numbers">
<p>Вам требуется создать нумерованный список с числами и вертикальной линией...</p>
<p>То для этих целей вертикальная полоса с "псевдоэлементом вполне возможно для использования!"</p>
</div>
Css:
<style>
div.numbers > p {
counter-increment: num;
margin-bottom: unset;
margin-top: unset;
}
div.numbers > p::before {
content: counter(num);
color: #f00;
text-align: center;
border-right: 1px solid #ff0000;
padding-right: 16px;
width: 40px;
margin: 6px 10px 0 -64px;
display: inline-block;
font-size: 13px;
}
</style>
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже: