Форум Сайтостроение Веб-строительство

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

nikonlay
На сайте с 11.12.2006
Offline
183
nikonlay
359

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

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

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

Мощные бинокли и монокуляры: https://market.yandex.ru/store--volny-i-veter?businessId=79203856
WR
На сайте с 27.04.2016
Offline
56
WCREATOR
#1

h1

{

border-bottom:1px solid #cccccc;

padding-bottom:3px;

}

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

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


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

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

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

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

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

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