Как добавить линию к заголовку с помощью :before и :after

Как добавить линию к заголовку с помощью :before и :after

Часто бывает, что необходимо добавить линию к заголовку, либо сверху, либо снизу. Конечно можно ограничиться простым свойством border-bottom, его можно настроить используя генератор границ блока, но при этом нельзя задать ширину линии отдельно от заголовка, а так же придать ей движение. Но когда это необходимо, можно сделать линию с помощью с помощью :before и :after.

Пример

Lorem Ipsum

HTML


<h3 class="title-example">Lorem Ipsum</h3>

CSS


h3.title-example{
    font-size: 1em; /* Размер шрифта */
    color: #5a5a5a; /* Цвет заголовка */
    text-align: center; /* Текст по центру */
}
/*  CSS код для линии над заголовком */
h3.title-example:before {
    content: '';
    display: block;
    height: 1px; /* Высота линии */
    background: #f66d52; /* Цвет линии */
    width: 150px; /* Ширина линии до наведения */
    margin: 0 auto 10px; /* Отступ с боков по центру и снизу */
	transition: 1s; /* Время, за которое линия возвращается после наведения */
}
h3.title-example:hover:before {
    width: 250px; /* Ширина линии при наведении */
	transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */
}
/*  CSS код для линии под заголовком */
h3.title-example:after {
    content: '';
    display: block;
    height: 1px; /* Высота линии */
    background: #f66d52; /* Цвет линии */
    width: 150px; /* Ширина линии до наведения */
    margin: 10px auto 0; /* Отступ с боков по центру и сверху */
	transition: 1s; /* Время, за которое линия возвращается после наведения */
}
h3.title-example:hover:after {
    width: 250px; /* Ширина линии при наведении */
	transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */
}
By julia