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

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

:before и :after дает результат, но над текстом:
5ceb931c178f2341629951.png
.luchshee-title:after{
    display: block;
    content: '';
    background: #fedd00;
    width: 314px;
    height: 11px;
    position: absolute;
    margin: -20px 0 0 -15px;
}


Прошу помощи. Спасибо!
  • Вопрос задан
  • 99 просмотров
Решения вопроса 1
daemonhk
@daemonhk
ПсиХоПат
Как-то так:

.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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы