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

Как сделать полоску под текстом в css

  • автор:

Сделать полосу под текстом

введите сюда описание изображения

Вот макет Вот HTML и CSS

 .items_2 < display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; margin: 53px 0; >.item_2 < display: flex; display: -webkit-flex; width: 50%; padding: 5px 25px; >.item_2 p < display: block; position: relative; font-size: 20px; line-height: 30px; color: #584A45; >.item_2 p:before
 

Comprehensive approach to your health

Experienced and expert trainers

High quality equipment

Location in the city center with a private garden

Wellness area with steam bath and infrared sauna

All-inclusive service - from coffee and shakes to shower products

Как сделать розовые линии под текcтом как на макете?

Отслеживать

19.7k 6 6 золотых знаков 22 22 серебряных знака 56 56 бронзовых знаков

задан 6 ноя 2020 в 16:08

1,681 12 12 серебряных знаков 27 27 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Фон делается элементарно — с помощью linear-gradient() .

Но, чтобы фон переносился по строкам, нужно преобразовать блочные параграфы в строчные, задав им display: inline; :

.items_2 < display: flex; flex-wrap: wrap; margin: 53px 0; >.item_2 < width: 50%; padding: 5px 25px; >.item_2 p < position: relative; display: inline; padding: 5px 0; font: 20px/30px sans-serif; color: #584A45; background-image: linear-gradient(to top, #f9f1ee, transparent); >.item_2 p:before
 

Comprehensive approach to your health

Experienced and expert trainers

High quality equipment

Location in the city center with a private garden

Wellness area with steam bath and infrared sauna

All-inclusive service - from coffee and shakes to shower products

Верстка заголовка с горизонтальной линией слева и справа от текста

Время от времени возникает необходимость сверстать необычный заголовок, в котором слева и/или справа от текста проходит горизонтальная линия, занимающая все свободное пространство. Выглядит это следующим образом (живой пример):

Заголовок с выравниванием слева
Заголовок с выравниванием по центру
Заголовок с выравниванием справа

Раньше для решения данной задачи я бы задействовал два тега: первому задал бы верхний бордюр, а второй сместил бы чуть вверх, задав ему белый фон и внутренний отступ слева и справа. Однако, эту задачу можно решить и другим, более красивым способом — использовав всего один тег. Кроме того, данный способ выручает в том случае, когда нет возможности вставить в исходный код второй тег. Как несложно догадаться, для добавления линий будут задействованы псевдоэлементы :before и :after . Вот CSS-код с комментариями для основных свойств, решающих поставленную задачу:

.title < /* чтобы линии не выходили за ширину блока заголовка */ overflow: hidden; >.title:before, .title:after < content: ''; /* делаем линию строчно-блочной */ display: inline-block; /* выравниваем вертикально по середине */ vertical-align: middle; /* не позволяем ширине превысить 100% (будет добавлен бордюр) */ box-sizing: border-box; /* установка ширины в 100% делает линию равной ширине тега заголовка ** благодаря этому линия заполнит все свободное пространство ** слева и справа от текста */ width: 100%; height: 3px; background: #6CBD83; /* добавляем к линии левый и правый бордюр цветом основного фона заголовка ** благодаря этому создается нужный отступ между линиями и текстом */ border: solid #FFF; border-width: 0 10px; >.title:before < /* смещаем левую линию влево отрицательным отступом, равным 100% ширины ** благодаря этому линия встает слева от текста */ margin-left: -100%; >.title:after < /* смещаем правую линию вправо отрицательным отступом, равным 100% ширины ** благодаря этому линия встает справа от текста */ margin-right: -100%; >

Вот таким хитрым кодом это и делается. У меня есть еще один аналогичный вариант решения данной задачи — через абсолютное позиционирование псевдоэлементов :before и :after . Однако, он оказался непригодным к использованию из-за очередного бага в браузере Internet Explorer (даже в последних версиях).

Смотрите также

Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

105 комментариев

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью .

Верстка красивых тегов для сайта + бонус

25 комментариев

Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала необходимо приготовить .

Зеленый свет CSS-свойствам при верстке под IE8 и выше

26 комментариев

Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. .

Комментарии (35)

Dimox, а можешь сделать раздвижку типа [текст]…[текст] — чтобы там где точечки раздвигалось? Как-то максимально компактно, чтобы не было лишней разметки.

Сложный заголовок с линиями по бокам текста на css

Сложный заголовок с линиями по бокам текста на css

Иногда нужно сверстать заголовок, у которого слева и справа располагаются линии, которые занимают все оставшиеся пространство. Для такого случая у меня есть рецепт как сверстать сложный заголовок с линиями по бокам текста.

Мы будем использовать обычный тег div с классом .title и его псевдоэлементы :before и :after . В div напишем нужный текст заголовка, а псевдоэлементы будут линиями: :before линия слева, :after соответственно будет линией справа.

Код html:

 
Наш
заголовок

Код css:

.title { /* Чтобы спрятать часть линий, которые ** будут вылазить за пределы блока */ overflow: hidden; /* Выравнивание заголовка по центру, ** можно использовать left, right */ text-align: center; /* Тут можно добавить другие стили для заголовка */ font-size: 30px; } .title span { /* Стили тега обертки для заголовков ** в несколько строк */ display: inline-block; vertical-align: middle; } .title:before, .title:after { /* Обязательно указываем пустое свойство content, ** иначе псевдоэлементы не появятся на сайте */ content: ""; /* Указываем что наши линии будут строчно-блочные и ** выравнивание по высоте - по центру */ display: inline-block; vertical-align: middle; /* Задаем ширину 100% и выбираем высоту линии, ** в нашем примере она равна 4 пикселям */ width: 100%; height: 4px; /* Добавляем цвет для линии */ background-color: #00cf00; /* Добавляем пседоэлемантам возможность изменить ** позицию линии, для создания отступов от текста */ position: relative; } .title:before { /* Смещаем левую линию на 100% влево, чтобы линия ** встала рядом с текстом слева */ margin-left: -100%; /* Указываем в пикселях отступ линии от текста заголовка */ left: -14px; } .title:after { /* Смещаем правую линию на 100% вправо, чтобы ** линия встала рядом с текстом справа */ margin-right: -100%; /* Указываем в пикселях отступ линии от текста заголовка */ right: -14px; }

Главное преимущество данного метода является то, что не имеет значения однотонный фон у блока или фон сделан изображением.

Как сделать полоску в 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: 150px; height: 1px; /* располагаем линию сверху от текста */ top: 25px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > 

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

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