CSS: before не работает с некоторыми элементами: after работает нормально - PullRequest
Новая
       13

CSS: before не работает с некоторыми элементами: after работает нормально

2 голосов
/ 11 апреля 2019

Я использую: before и: after для имитации стрелки. Код: after для кода просто отлично, но добавление: before - нет, он даже не отображается в разделе элементов chrome DevTools.

Я убедился, что контент добавлен. Также попытался добавить ширину, высоту, display: block, z-index, чтобы проверить, появится ли он.

Сайт: https://dev.radiusbridge.com/dis0319/ Коды относятся к пунктам меню 2-го уровня на мобильной версии сайта. (991px и ниже)

Это: после кода, который хорошо работает 

ul#menu-main-navigation > li > .sub-menu > li > .sub-menu > li > a.nav-link:after {
    display: block;
    content: "";
    height: 1px;
    background: #CDDC3C;
    width: 20px;
    position: absolute;
    right: -20px;
    top: 15px;
    transition: all 0.2s ease-in-out;
}

Это код: before, который не работает 

ul#menu-main-navigation > li > .sub-menu > li > .sub-menu > li > a.nav-link:before {
    content: "\f105";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    color: #CDDC3C;
    font-size: 13px;
    position: absolute;
    right: -23px;
    top: 5.45px;
    transition: all 0.2s ease-in-out;
}

Я ожидаю, что код: before будет работать так же, как и: after.

PS: элемент before не отображается в DevTools (Inspect Element)

1 Ответ

2 голосов
/ 11 апреля 2019

Ваш CSS содержит следующее правило: 

ul.sub-menu > li > a:before {
    display: none!important;
}

Селектор соответствует элементу, а !important означает, что он имеет приоритет.DevTools раздражает тем, что просто не показывает псевдоэлементы, которые не отображаются.

Либо отрегулируйте это правило, либо добавьте display: block!important к правилу "стрелка".

...