Верх страницы
Обложка к записи CSS: Текст поверх линии
Время для прочтения: 0 мин. 0 сек.

CSS: Текст поверх линии

Очень часто дизайнеры требует от верстальщиков писать текст поверх линии на неоднородном фоне.

Читая сегодня Хабр, увидел очередной велосипед и решил поделиться своим вариантом решения данной проблемы.

Исходный чистый HTML:


<h1 class="line">Текст поверх линии</h1>

И очень простой CSS:


.line {  
 position: relative;
 z-index: 1;
 overflow: hidden;
 text-align: center;
}

До и после заголовка вставляем строки с фоном под цвет линии:


.line:before,
.line:after {
 content: '';
 display: inline-block;
 width: 100%;
 height: 1px;
 background: #000;
 z-index: -1;
 position: relative;
 vertical-align: middle;
}

Расставляем отступы:


.line:before {
 right: 15px;
 margin: 0 0 0 -100%;
}
.line:after {
 left: 15px;
 margin: 0 -100% 0 0;
}

Пример:

See the Pen mCjLF by mihdan (@mihdan) on CodePen.0

Ссылки

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

4 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
MaRSeL
MaRSeL
9 лет назад

Благодарю)

mihdan
9 лет назад
Ответить на  MaRSeL

Не за что.

Виктор
Виктор
7 лет назад

А что делать если нужно чтобы такой текст размещался на каком-то фоне? Вот тут нашел более красивое решение такого заголовка — заголовко на css

Предыдущая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы