Как добавить линию возле текста?
Можно по-разному привлечь внимание читателя к тексту. Например, сделать текст жирного начертания, изменить его цвет, использовать фон, нарисовать рамку. Но что если требуется не просто выделить текст, сколько отделить один текстовый блок от другого, разделить их на разные смысловые части? Вот тут использование линий и отступов просто неоценимо.
Текстовый блок на веб-странице сильно отличается от своего печатного собрата. Главным отличием является варьируемая ширина и высота текста, которые зависят от разрешения монитора, настроек операционной системы, браузера и других подобных вещей. Данные особенности придают верстке веб-страниц определенную сложность, но при этом порождают специфичные техники, которые намного упрощают процесс создания сайта. Рассмотрим, как можно использовать стили, чтобы создать произвольную линию возле текста, независимую от его размеров.
Для создания линий используется свойство CSS — border , которое устанавливает рамку вокруг блока. В частных случаях, для создания линии лишь с одной стороны элемента, используются свойства border-bottom , border-top , border-left и border-right , они соответственно задают линию снизу, сверху, слева и справа.
Значения этих свойств перечисляются через пробел и сразу устанавливают тип линии, её толщину и цвет. Стиль линии может принимать одно из восьми значений, как показано на рис. 1, а толщина задается, как правило, в пикселах.
Рис. 1. Типы линий
В примере 1 показано создание вертикальной линии рядом с текстом.
Пример 1. Вертикальная линия слева от текста
HTML5 CSS 2.1 IE Cr Op Sa Fx
Линия слева от текста
Чтобы исходный стиль абзаца оставить неизменным, введён новый класс line , который устанавливает возле абзаца вертикальную линию. Данный класс, кроме того, ещё задаёт смещение 20 пикселов от левого края окна до текста с помощью свойства margin-left и отступ от линии до текста через padding-left , без него текст будет соприкасаться с линией слишком плотно. Результат показан на рис. 2.
Рис. 2. Линия слева от текста
Как добавить вертикальную линию к тексту?
Цветная линия возле текста привлекает к нему внимание, а цвет линии и фона может информировать о разном статусе текста — цитата, сообщение, предупреждение, важная информация и др.
Для вывода линии слева от текста применяется свойство border-left, оно создаёт линию заданной толщины, стиля и цвета. При этом высота линии привязывается к высоте текста и меняется вместе с ним. Чтобы линия и фон не прилегали плотно к тексту, расстояние от края до текста регулируется с помощью свойства padding.
В примере 1 используется класс callout , с помощью которого добавляется необходимый стиль. Цвет линии определяется через вспомогательные классы info , warning и alert .
Пример 1. Использование border-left
Результат данного примера показан на рис. 1.
Рис. 1. Линия с текстом
См. также
- border-left
- margin в CSS
- padding
- Блочные элементы
- Колесо для сокращённых свойств
- Отзывчивый веб-дизайн
- Открываем блочную модель
- Свойства текста в CSS
- Строчные элементы
Как сделать вертикальную линию между элементами по вертикали?
Вот пример того, что я бы хотел понять. Как Вы видите тут линия которая касается одного значка и всех последующих, допустим текста в блоках будет больше, тогда и линии должны увеличиться, не могу понять как можно прижать по вертикали к верху и низу и чтобы это заканчивалось на значке.
- Вопрос задан более трёх лет назад
- 815 просмотров
1 комментарий
Простой 1 комментарий
Как сделать вертикальную линию между словами?
Изучил основы html и css, начал практиковаться в вёрстке макетов. Сверстал один макет, начал второй, но появилась сложность с меню в шапке. Не знаю как сделать такую вертикальную линию между слов. Спасибо за помощь!
Отслеживать
задан 29 окт 2020 в 18:37
21 1 1 серебряный знак 2 2 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
да куча вариантов, как вы это можете сделать
вариант 1:
.text < display: inline-block; padding: 5px 10px; font-size: 20px; border-right: 1px solid #d0d0d0; >.text:last-child
текст 1 текст 2 вариант 2:
.text < display: inline; padding: 0px 10px; font-size: 20px; >.vr
текст 1 текст 2