Skip to content

Instantly share code, notes, and snippets.

@AlexKardone
Created November 26, 2017 09:36
Show Gist options
  • Save AlexKardone/27372bacc38ac79fdeb79c40faf280e6 to your computer and use it in GitHub Desktop.
Save AlexKardone/27372bacc38ac79fdeb79c40faf280e6 to your computer and use it in GitHub Desktop.
Линия слева и справа от текста
http://dimox.name/verstka-zagolovka-s-gorizontalnoj-liniej-sleva-i-sprava-ot-teksta/
.title {
/* чтобы линии не выходили за ширину блока заголовка */
overflow: hidden;
}
.title:before,
.title:after {
content: '';
/* делаем линию строчно-блочной */
display: inline-block;
/* выравниваем вертикально по середине */
vertical-align: middle;
/* не позволяем ширине превысить 100% (будет добавлен бордюр) */
box-sizing: border-box;
/* установка ширины в 100% делает линию равной ширине тега заголовка
** благодаря этому линия заполнит все свободное пространство
** слева и справа от текста
*/
width: 100%;
height: 3px;
background: #6CBD83;
/* добавляем к линии левый и правый бордюр цветом основного фона заголовка
** благодаря этому создается нужный отступ между линиями и текстом
*/
border: solid #FFF;
border-width: 0 10px;
}
.title:before {
/* смещаем левую линию влево отрицательным отступом, равным 100% ширины
** благодаря этому линия встает слева от текста
*/
margin-left: -100%;
}
.title:after {
/* смещаем правую линию вправо отрицательным отступом, равным 100% ширины
** благодаря этому линия встает справа от текста
*/
margin-right: -100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment