Заголовок с линиями по бокам текста на css

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

Мы будем использовать обычный тег div с классом .title и его псевдоэлементы :before и :after. В div напишем нужный текст заголовка, а псевдоэлементы будут линиями: :before линия слева, :after соответственно будет линией справа.

Код html:

Код css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.title {
/* Чтобы спрятать часть линий, которые
** будут вылазить за пределы блока */
overflow: hidden;
/* Выравнивание заголовка по центру,
** можно использовать left, right */
text-align: center;
/* Тут можно добавить другие стили для заголовка */
font-size: 30px;
}
.title span {
/* Стили тега обертки для заголовков
** в несколько строк */
display: inline-block;
vertical-align: middle;
}
.title:before,
.title:after {
/* Обязательно указываем пустое свойство content,
** иначе псевдоэлементы не появятся на сайте */
content: "";
/* Указываем что наши линии будут строчно-блочные и
** выравнивание по высоте - по центру */
display: inline-block;
vertical-align: middle;
/* Задаем ширину 100% и выбираем высоту линии,
** в нашем примере она равна 4 пикселям */
width: 100%;
height: 4px;
/* Добавляем цвет для линии */
background-color: #00cf00;
/* Добавляем пседоэлемантам возможность изменить
** позицию линии, для создания отступов от текста */
position: relative;
}
.title:before {
/* Смещаем левую линию на 100% влево, чтобы линия
** встала рядом с текстом слева */
margin-left: -100%;
/* Указываем в пикселях отступ линии от текста заголовка */
left: -14px;
}
.title:after {
/* Смещаем правую линию на 100% вправо, чтобы
** линия встала рядом с текстом справа */
margin-right: -100%;
/* Указываем в пикселях отступ линии от текста заголовка */
right: -14px;
}

Главное преимущество данного метода является то, что не имеет значения однотонный фон у блока или фон сделан изображением.

Share this post:

Recent Posts