Как сделать заголовок с подчеркиванием под ним?

Question

[Александр Токмаков]

Здравствуйте. Необходимо реализовать подчеркивание за заголовком на css. Поиск не дал результатов.


:before и :after дает результат, но над текстом:

.luchshee-title:after{
    display: block;
    content: '';
    background: #fedd00;
    width: 314px;
    height: 11px;
    position: absolute;
    margin: -20px 0 0 -15px;
}

Прошу помощи. Спасибо!

Comments

[FeST1VaL]

ну я почти такой же макет верстал, просто через :after. Используйте z-index и будет счастье

[Александр Токмаков]

Артем Будин, Спасибо!

[Сергей delphinpro]

Лучше это нарисовать градиентом. Тогда у вас будет корректно отображаться эта линия, даже если заголовок будет в несколько строк.

Хотя, если не во всю строку линия, то нет.

Answer 1

[Одиночка Айс]

Как-то так:

.luchshee-title{
    font-size:20px;
    display:inline-block;
    position:relative;
    z-index:3;
}
.luchshee-title:after{
    display: block;
    content: '';
    background: #fedd00;
    width: 100%; //не используйте волшебные числа, типа 314
    height: 11px;
    position: absolute;
    margin: -20px 0 0 -15px;
    z-index:-1; //Прячем элемент под родителя
}

div class="luchshee-title">Лучшее предложение</div>

Comments

[Александр Токмаков]

Спасибо. Странно z-index у меня не работал, теперь заработал) Спасибо!