Не отображается полосочка в :after


nikonlay
347

Подскажите пожалуйста, хотел взять вот такую полосочку http://prntscr.com/s422g8 под заголовком отсюда https://www.kawai-global.com/product/sk-5/ , там такой код: http://prntscr.com/s41zn9


.pro_detail h3::after {
content: "";
width: 72px;
height: 1px;
}

Скопировал аналогично — почему-то не работает. http://prntscr.com/s423zk

Хотя, если для теста ставлю просто content: «test» — слово отображается.

А вот заданием просто ширины, высоты и бекграунда — не работает.

Мог бы кто-нибудь подсказать, почему?


WCREATOR

h1

{

border-bottom:1px solid #cccccc;

padding-bottom:3px;

}


timo-71

nikonlay:
height: 1px;

display:block;


dma84


.pro_detail h3::after {
content: "";
display: block;
background: gray;
width: 72px;
height: 1px;
margin: auto;
}


nikonlay

timo-71, dma84 — Спасибо за ответы!

Действительно, добавил display: block; и все заработало!

WCREATOR — да, такой способ создания подчеркивания тоже знаю, но хотелось именно озвученный в топике, тк он дает возможность настроить ширину.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *