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

Как добавить полосу в html

  • автор:

Как сделать полоску в 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; > 

Линия(полоска) в css

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

Как сделать выделенную линию(полоску) в css под текстом с отступами?

Отслеживать
задан 1 апр 2020 в 8:19
Григорий Калашников Григорий Калашников
91 7 7 бронзовых знаков
p:after — пробовали ?
1 апр 2020 в 8:48
А какие стили применить к псевдоэлементу after?
1 апр 2020 в 9:16
width: 20px; height: 2px; background: #ccc; position: absolute; bottom: 0; left; 0; content: «»;
1 апр 2020 в 9:17

2 ответа 2

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

h1 < display: inline-block; position: relative; >h1:before
Заголовок

Отслеживать
ответ дан 1 апр 2020 в 10:27
Sevastopol’ Sevastopol’
28.2k 12 12 золотых знаков 78 78 серебряных знаков 147 147 бронзовых знаков

Почему бы не использовать тег hr для этого? Или решение должно быть чисто на css?

Отслеживать
ответ дан 1 апр 2020 в 10:53
56 5 5 бронзовых знаков
А как у hr добавить отступ?
1 апр 2020 в 14:01
через стили, в принципе
1 апр 2020 в 15:23

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.6.4.10328

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

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

Вот макет Вот 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.8k 6 6 золотых знаков 22 22 серебряных знака 56 56 бронзовых знаков

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

1,701 14 14 серебряных знаков 28 28 бронзовых знаков

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?

А зачем такие требования? У обоих псевдоэлементов поддержка браузерами хуже, чем просто border-bottom .

29 мар 2016 в 12:56
@ОлегДёгтев, откуда такие сведения про поддержку?
29 мар 2016 в 12:59
Ну вот нужно, подскажите пожалуйста
29 мар 2016 в 13:00
а у вас точно css? он же не поддерживает вложенное описание селекторов
29 мар 2016 в 13:05

@w3lifer: В моей практике все еще очень часто пишутся ТЗ, в которых требуется поддержка от ИЕ7. Если у вас иначе, то я вам завидую =)

29 мар 2016 в 15:31

1 ответ 1

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

Вот SCSS:

Пример

Отслеживать
ответ дан 29 мар 2016 в 13:01
Василий Барбашев Василий Барбашев
3,747 2 2 золотых знака 14 14 серебряных знаков 23 23 бронзовых знака
так-то предоставленный код не css, напрямую в браузере вряд ли заработает
29 мар 2016 в 13:02
@Grundy поправил
29 мар 2016 в 13:03
а без бордера возможно?например, высота и ширина?
29 мар 2016 в 13:03
@НикитаЩипилов поправил пример
29 мар 2016 в 13:04

@w3lifer это SCSS, удобная вещь, habrahabr.ru/post/140612 . Парсится потом в CSS, конструкции получаются более удобными и приятными глазу, + можно использовать калькуляцию и переменные

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

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