Как добавить линию в css
Перейти к содержимому

Как добавить линию в css

  • автор:

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

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

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

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

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

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

Линия с текстом

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

См. также

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

Как добавить линию к заголовку с помощью :before и :after

Как добавить линию к заголовку с помощью :before и :after

Часто бывает, что необходимо добавить линию к заголовку, либо сверху, либо снизу. Конечно можно ограничиться простым свойством border-bottom, его можно настроить используя генератор границ блока, но при этом нельзя задать ширину линии отдельно от заголовка, а так же придать ей движение. Но когда это необходимо, можно сделать линию с помощью с помощью :before и :after.

Пример

Lorem Ipsum

HTML

 

Lorem Ipsum

CSS

 h3.title-example < font-size: 1em; /* Размер шрифта */ color: #5a5a5a; /* Цвет заголовка */ text-align: center; /* Текст по центру */ >/* CSS код для линии над заголовком */ h3.title-example:before < content: ''; display: block; height: 1px; /* Высота линии */ background: #f66d52; /* Цвет линии */ width: 150px; /* Ширина линии до наведения */ margin: 0 auto 10px; /* Отступ с боков по центру и снизу */ transition: 1s; /* Время, за которое линия возвращается после наведения */ >h3.title-example:hover:before < width: 250px; /* Ширина линии при наведении */ transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */ >/* CSS код для линии под заголовком */ h3.title-example:after < content: ''; display: block; height: 1px; /* Высота линии */ background: #f66d52; /* Цвет линии */ width: 150px; /* Ширина линии до наведения */ margin: 10px auto 0; /* Отступ с боков по центру и сверху */ transition: 1s; /* Время, за которое линия возвращается после наведения */ >h3.title-example:hover:after < width: 250px; /* Ширина линии при наведении */ transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */ >

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

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

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

 class="create-line">
.create-line  width: 200px; border-top: 3px solid #32a1ce; > 

Вариант №2. Используем готовый тег который формирует горизонтальную линию — hr.

Вариант №3. С помощью псевдоэлементов :before и :after . Этот вариант немного сложнее, но за то мы обойдемся без правки HTML-кода. Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или с левой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.

 class="create-line-left"> Добавим линию слева и справа 

Теперь рассмотрим стили.

.create-line-left  padding-left: 20px; /* необходим для формирования позиций линий */ position: relative; /* весь блок будет занимать ширину по размеру контента в нём */ display: inline-block; > .create-line-left:before content: " "; background: #33CCFF; width: 50px; height: 1px; /* располагаем линию сверху от текста */ top: 15px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > .create-line-left:after content: " "; background: #333333; width: 50px; height: 1px; /* размещаем линию снизу и справа*/ bottom: 15px; right: 20px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > 

Как добавить линию в css

В связи с переходом на новый движок. возможны сбои в работе! Простите!
Работы производятся прямо сейчас 20-02-2024! ��

Горизонтальная линия сплошная — css

В данном пункте разберем создание горизонтальной линии с помощью блока div.

Для этого на м понадобится:

без текста

Далее нам понадобится attribute style

Вовнутрь помещаем свойство border + solid + 1px толщина линии + подбираем цвет( -> генератор цвета) пусть это будет » #d71212 «.

Соединим наш код горизонтальной сплошной линии вместе:

Пример вывода горизонтальной сплошной линии с помощью блока div

[kod] Добавим еще:

Пример вывода горизонтальной сплошной линии толщина 5px

Горизонтальная линия точками — css

В следующем пункте разберем, как сделать горизонтальную линию с помощью точек. Если в выше приведенном пункте унас была «горизонтальная линия сплошная«, то в этом пункте мы сделаем «горизонтальную линию точками!«

Для этого нам понадобится:

Опять будем использовать двойной тег div:

без текста

По той же схеме: border + только вместо сплошной, берем точками: dotted + 1px толщина линии, оставляем прежней + подбираем цвет( -> генератор цвета) цвет изменим, пусть это будет » #d71212 «.

Соединим наш код горизонтальной линии вместе:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *