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

Один из способов сделать заголовок с горизонтальной линией по центру без изображения (background-image).

Есть недостаток – фон под заголовком должен быть однотонным иначе <span> будет виден.

<div class="title">
	<span>Рекомендуем</span>
</div>
HTML
.title {
	font-size: 20px;
	color: rgb(50, 50, 50);
	text-transform: uppercase;
	line-height: 1.5;
	text-align: center;
	position: relative;
}
.title span {
	background: #fff;
	display: inline-block;
	padding: 0 18px;
	position: relative;
}
.title:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;        
	width: 100%;
	height: 2px; /* ширина линии */
	background: #f3f4f2; /* цвет линии */
}
CSS

Результат:

07.12.2016 , обновлено 17.10.2019

Комментарии

, чтобы добавить комментарий.

Другие публикации

Яндекс Карты – метки и балуны
Сборник примеров установки меток на карту по координатам и адресу, изменение их вида и вывод балунов.
24.07.2018
8919
0
Мануал по созданию и форматированию excel файлов в PHPExcel
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
12.06.2019
11468
+5
Модальное окно на затемненном фоне
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
12.12.2018
11981
+7
Получить фото из Instagram без API
Так как Instagram и Fasebook ограничили доступ к API, а фото с открытого аккаунта всё же нужно периодически получать и...
13.12.2019
2107
+2
Обработка изображений в PHP
Библиотека GD дает возможность работать с изображениями в PHP. Далее представлены примеры как изменить размер, вырезать часть изображения и т.д.
22.01.2018
19761
+2
Слайдеры изображений на плагине bxSlider
BxSlider отличный jquery плагин слайдеров и каруселей, адаптивный, легко настраивается, поддерживает любой тип...
13.02.2020
219
0