Здравствуйте! в этой статья пойдёт речь, как с помощью CSS стилизовать заголовки, добавив к ним линии.
для примера возьмём заголовок такого типа
Код
<h1 class="pretty-header">HEADER</h1>
ну и конечно жк укажем для него пару строк стилей
Код
.pretty-header {
font-size: 22px;
line-height: 22px;
margin: 20px 0px;
position: relative;
overflow: hidden;
}
Ну а теперь можно приступить к работе и добавить к нему линии
Горизонтальная линия справа
Сначала добавим простую линию справа от заголовка. для этого давайте присвоим нашему элементу ещё один класс
right-line-header что бы получилось вот так
Код
<h1 class="pretty-header right-line-header">HEADER</h1>
Ну и теперь опишем новый CSS-класс.
Код
.right-line-header:after {
content: "";
border-bottom: 1px solid #4bb;
width: 100%;
height: 0.5em;
position: absolute;
top: 0px;
margin-left: 10px;
}
Так как линия имеет ширину 100% и при этом по умолчанию (свойства
left/right не заданы) смещена относительно левого края заголовка, то есть располагается сразу за текстом, она будет вылезать за границы тега заголовка справа. Чтобы скрыть лишнюю часть линии мы изначально добавили заголовку свойство
overflow: hidden. Для линии используется абсолютное позиционирование, чтобы иметь возможность задавать ей ширину, как блочному элементу. но при этом избежать перехода её на новую строку под заголовок. Для указания, относительно какого элемента позиционируется лиция, заголовку задано свойство
position: relative. Вертикальное положение линии можно регулироваться свойствами
top и
height. Пример ниже
Две полосы с право
для этого предлагаю использовать новый класс для удобства
Код
<h1 class="pretty-header right-double-line-header">HEADER</h1>
Добавив вторую границу и соответственно изменив смещение сверху. Свойство
height регулирует расстояние между линиями. Смещение вычисляется как
1 - height 2 -border-width. В данном примере
border-width = 1px, эта корректировка необходима для учёта ширины самой линии.
Код
.right-double-line-header:after {
content: "";
border-bottom: 1px solid #4bb;
border-top: 1px solid #4bb;
width: 100%;
height: 0.1em;
position: absolute;
top: calc(0.45em - 1px);
margin-left: 10px;
}
Пример
Горизонтальная линия справа и слева
Если заголовок выровнен по центру, его можно оформить двумя линиями справа и слева.
Код
<h1 class="pretty-header left-right-line-header">HEADER</h1>
css стили
Код
.left-right-line-header {
text-align: center;
}
.left-right-line-header:before {
content: "";
border-bottom: 1px solid #4bb;
width: 50%;
height: 0.5em;
position: absolute;
top: 0px;
margin-left: calc(-50% - 10px);
}
.left-right-line-header:after {
content: "";
border-bottom: 1px solid #4bb;
width: 50%;
height: 0.5em;
position: absolute;
top: 0px;
margin-left: 10px;
}
Пример
Линии не обязательно должны быть на всю ширину страницы, можно задать им фиксированный размер.
Код
<h1 class="pretty-header left-right-line-short-header">HEADER</h1>
css стили
Код
.left-right-line-short-header {
text-align: center;
}
.left-right-line-short-header:before {
content: "";
border-bottom: 1px solid #4bb;
border-top: 1px solid #4bb;
width: 40px;
height: 0.1em;
position: absolute;
top: calc(0.45em - 1px);
margin-left: -50px;
}
.left-right-line-short-header:after {
content: "";
border-bottom: 1px solid #4bb;
border-top: 1px solid #4bb;
width: 40px;
height: 0.1em;
position: absolute;
top: calc(0.45em - 1px);
margin-left: 10px;
}
Пример
waak 
web_master 
