Добавить сайту индивидуальности можно небольшими элементами оформления. В этой статья я расскажу, как с помощью CSS стилизовать заголовки, добавив к ним линии.
Основой для всех примеров будет простая заготовка:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Заголовок с линиями</title>
<style>
.pretty-header {
font-size: 22px;
line-height: 22px;
margin: 20px 0px;
position: relative;
overflow: hidden;
}
</style>
</head>
<body>
<h1 class="pretty-header">HEADER</h1>
Lorem ipsum dolor sit amet, enim impedit ut vim. Mucius adipisci mel te, eam ut putent albucius appareat. Modus detracto ne vix. Maiestatis suscipiantur vix cu, mea et lucilius accommodare. Commodo feugait vis te. Tota noluisse usu te.
</body>
</html>
Lorem ipsum dolor sit amet, enim impedit ut vim. Mucius adipisci mel te, eam ut putent albucius appareat. Modus detracto ne vix. Maiestatis suscipiantur vix cu, mea et lucilius accommodare. Commodo feugait vis te. Tota noluisse usu te.
Горизонтальная линия справа
Сначала добавим простую линию справа от заголовка.
<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.
Lorem ipsum dolor sit amet, enim impedit ut vim. Mucius adipisci mel te, eam ut putent albucius appareat. Modus detracto ne vix. Maiestatis suscipiantur vix cu, mea et lucilius accommodare. Commodo feugait vis te. Tota noluisse usu te.
При желании линию можно сделать двойной.
<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;
}
Lorem ipsum dolor sit amet, enim impedit ut vim. Mucius adipisci mel te, eam ut putent albucius appareat. Modus detracto ne vix. Maiestatis suscipiantur vix cu, mea et lucilius accommodare. Commodo feugait vis te. Tota noluisse usu te.
Горизонтальная линия справа и слева
Если заголовок выровнен по центру, его можно оформить двумя линиями справа и слева.
<h1 class="pretty-header left-right-line-header">HEADER</h1>
.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;
}
Lorem ipsum dolor sit amet, enim impedit ut vim. Mucius adipisci mel te, eam ut putent albucius appareat. Modus detracto ne vix. Maiestatis suscipiantur vix cu, mea et lucilius accommodare. Commodo feugait vis te. Tota noluisse usu te.
Линии не обязательно должны быть на всю ширину страницы, можно задать им фиксированный размер.
<h1 class="pretty-header left-right-line-short-header">HEADER</h1>
.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;
}
Lorem ipsum dolor sit amet, enim impedit ut vim. Mucius adipisci mel te, eam ut putent albucius appareat. Modus detracto ne vix. Maiestatis suscipiantur vix cu, mea et lucilius accommodare. Commodo feugait vis te. Tota noluisse usu te.
Живой пример доступен на JSFiddle.
