Заголовок с линией [дубликат]

222
18 июля 2017, 19:15

На данный вопрос уже ответили:

  • Линия до и после текста над картинкой 3 ответа

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

Answer 1

Например с помощью псевдоэлементами :before и :after:

h3 { 
  text-transform: uppercase; 
  font-weight: normal; 
  color: #333; 
   
  display: inline-block; 
  vertical-align: middle; 
  position: relative; 
  padding: 0 2rem; 
} 
 
h3:before, 
h3:after { 
  content: ''; 
  position: absolute; 
  height: 1px; 
  background: #bbb; 
  top: 50%; 
} 
 
h3:before{ 
  left: -9999px; 
  right: 100%; 
} 
 
h3:after{ 
  left: 100%; 
  right: -9999px; 
} 
 
.wrap { 
  width: 100%; 
  text-align: center; 
  margin: 0 auto 2rem; 
  overflow: hidden; 
  background: #eee; 
}
<div class="wrap"> 
<h3>Новинки</h3> 
</div>

READ ALSO
Подстраивать footer под контент body
CSS

Подстраивать footer под контент body

Норм когда контент малый, когда велик налезает

 205
Архитектура DB для мессенджера
MySQL

Архитектура DB для мессенджера

Как грамотнее с точки зрения оптимизации сделать БД для мессенджера?

 319
Ошибка -bash: $: command not found
MySQL

Ошибка -bash: $: command not found

Читаю книжку по mysql и php, но встрял как убитый на следующем пункте: При попытке следовать инструкциям получаю ошибку, и не знаю как быть дальше:...

 294
Вывод данных при GROUP BY
MySQL

Вывод данных при GROUP BY

Самая обычная база MySQL, содержит данные (отвеченные и не отвеченные вызовы): Вариант 1

 257