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

nikonlay
На сайте с 11.12.2006
Offline
150
343

Подскажите пожалуйста, хотел взять вот такую полосочку 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" - слово отображается.

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

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

会員限定プレゼントにご参加いただきありがとうございます!
WR
На сайте с 27.04.2016
Offline
56
#1

h1

{

border-bottom:1px solid #cccccc;

padding-bottom:3px;

}

сайты на OVH
T7
На сайте с 19.09.2018
Offline
43
#2
nikonlay:
height: 1px;

display:block;
dma84
На сайте с 21.04.2009
Offline
168
#3


.pro_detail h3::after {
content: "";
display: block;
background: gray;
width: 72px;
height: 1px;
margin: auto;
}
nikonlay
На сайте с 11.12.2006
Offline
150
#4

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

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

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

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий