Как сделать полоску с помощью :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 золотых знака 13 13 серебряных знаков 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, конструкции получаются более удобными и приятными глазу, + можно использовать калькуляцию и переменные
29 мар 2016 в 13:08
- html
- scss
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Добавление горизонтальных линий до и после заголовка или изображения на CSS
Для того, чтобы добавить в качестве обрамительного элемента горизонтальные линии до и после заголовка (картинки, логотипа и т.д.) можно использовать CSS и сделать при этом вполне адаптивный вариант.
Для этого нужно использовать псевдоэлементы :before и :after. Html-конструкция должна выглядеть следующим образом:
Для основной обертки используем следующие CSS-правила:
text-align : center ; /* выравнивание заголовка по центру обертки */
width : 80% ; /* ширина обертки. На самом деле для фиксированной верстки можно использовать и px, но лучше сразу адаптировать под разные устройства, т.к. это, что называется, тренди 🙂 */
margin : 0 auto ; /* выравнивание обертки по центру документа */
overflow : hidden ; /* прячем линии за границами обертки, чтобы в случае изменения ширины экрана линии не выходили за ее пределы */
Для дочернего элемента добавляем позиционирование, чтобы впоследствии управлять расположением линий в рамках обертки:
.block span < position : relative ;
Теперь перейдем непосредственно к оформлению псевдоэлементов (будущих линий):
.block span:before <
display : block ; /* делаем псевдоэлемент блоком для последующего работы с ним, как с простым div’ом */
width : 1000px ; /* устанавливаем ширину линию. Можно использовать произвольную ширину */
content : » ; /* позволяет вставлять генерируемое содержание в текст страницы, которое первоначально в тексте отсутствует */
position : absolute ; /* абсолютное позиционирование для управления линиями */
border-bottom : 1px solid #000 ; /* бордер псевдо дива, т.е. сама линия */
top : 50% ; /* позиционирование по вертикали */
right : 110px ; /* позиционирование по горизонтали */
/* аналогичные стили для второго псевдоэлемента */
.block span:after <
display : block ;
width : 1000px ;
position : absolute ;
border-bottom : 1px solid #000 ;
left : 110px ;
Вот собственно все. Линии слева и справа от заголовка появились, они полностью на CSS, смотряться аккуратно как на десктопе, так и на мобильных устройствах.
Демо
6 комментариев
- Фаррух 06.05.2021 at 19:27
у меня не получилось
У меня тоже не получилось
Отлично работает.
Спасибо большое.
- Sergey 23.04.2022 at 18:08
Рад, что материал приносит пользу! ��
спасибо за материал – хорошо изложен, только мне не совсем понятны 2 вещи: 1. что отвечает за отступ от текста 2. откуда взялись 110рх? если поясните, буду оч рада
- Sergey 06.08.2022 at 21:40
Спасибо вам за комментарий. Относительно вопросов:
1) Если я правильно понял вопрос, то как раз именно left и right у псевдоэлементов в 110px отвечают за отступ от текста
2) 110px – это динамический отступ горизонтальных линий от текста из первого вопроса. Если будет другое слово, то отступ должен быть подобран другой. Не очень универсальное решение, согласен.
Как добавить линию к заголовку с помощью :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; /* Время, за которое линия расширяется при наведении */ >