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

Как добавить вертикальную линию к тексту?

Цветная линия возле текста привлекает к нему внимание, а цвет линии и фона может информировать о разном статусе текста — цитата, сообщение, предупреждение, важная информация и др.

Для вывода линии слева от текста применяется свойство border-left, оно создаёт линию заданной толщины, стиля и цвета. При этом высота линии привязывается к высоте текста и меняется вместе с ним. Чтобы линия и фон не прилегали плотно к тексту, расстояние от края до текста регулируется с помощью свойства padding.

В примере 1 используется класс callout , с помощью которого добавляется необходимый стиль. Цвет линии определяется через вспомогательные классы info , warning и alert .

Пример 1. Использование border-left

Результат данного примера показан на рис. 1.

Рис. 1. Линия с текстом

См. также

• border-left
• margin в CSS
• padding
• Блочные элементы
• Колесо для сокращённых свойств
• Отзывчивый веб-дизайн
• Открываем блочную модель
• Свойства текста в CSS
• Строчные элементы

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

Вы можете использовать CSS-свойство border в элементе в сочетании с другими CSS-свойствами, такими как display и height , для создания вертикальных линий в HTML.

В следующем примере будет создана вертикальная разделительная линия между двумя изображениями. Вы можете дополнительно увеличить высоту линии, просто увеличив значение свойства height .

     .vertical-line    

Читайте также

Похожие примеры:

• Как изменить цвет элемента
  

  ---

  с помощью CSS

• Как применить границу к элементу при наведении курсора мыши, не влияя на макет в CSS
• Как сделать границу внутри элемента div с помощью CSS

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

• 18 декабря, 2019
• 137

Как анимировать фоновый цвет элемента при наведении курсора мыши с помощью CSS

Вы можете использовать CSS-свойство transition, чтобы плавно анимировать background-color элемента при наведении курсора мыши. Давайте посмотрим пример, чтобы понять, как это работает:

• 15 декабря, 2019
• 202

Как определить или создать таблицу стилей только для Internet Explorer

Поддержка старых версий IE — головная боль для разработчиков сайтов. В большинстве случаев вы не сможете избежать этого из-за требований проекта или из-за того, что ваш клиент все еще использует старую версию Internet Explorer. Каждая версия IE ведет себя несколько иначе, чем другие. Первое, что нам нужно, это определить отдельные таблицы стилей для разных версий…

• 13 декабря, 2019
• 441

Как отключить выделение выделения текста в браузерах с помощью CSS

По умолчанию, когда вы выделяете текст в браузере, он обычно выделяется синим цветом. Но вы можете отключить это выделение с помощью псевдоэлемента CSS ::selection. В настоящее время браузеры поддерживают только небольшое подмножество CSS-свойств для псевдоэлемента ::selection, например color, background-color и text-shadow. Вот пример:

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

Как сделать — Вертикальную линию

Узнать, как создать вертикальную линию с помощью CSS.

Вертикальная линия

Пример

Вертикальная линия по центру:

Пример

.vl <
border-left: 6px solid green;
height: 500px;
position: absolute;
left: 50%;
margin-left: -3px;
top: 0;
>

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

курс сегодня!

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

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

Для формирования линии можно пойти разными путями. Давайте рассмотрим некоторые из них:

Можно определить обычный div элемент и покрасить у него одну из сторон с помощью свойства border.

 class="create-line">

.create-line  height: 200px; border-left: 3px solid #32a1ce; > 

 class="create-line-left"> Добавим линию снизу 

.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; >