Почему :: после селектора не работает должным образом в моем коде?

Question

Я использую bootstrap 4 для моего кода.Как я использую :: после, как показано ниже

.navbar-light .navbar-nav > li >a::after{
    content: " ";
    height: 50px;
    width: 10%;
    background-image: linear-gradient(to right,#1E8BC3,rgb(162, 214, 240)) !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index:8;
}

Цвет фона должен быть показан во всех li> a, но он показывает только левую сторону панели навигации как скриншот в ссылке ниже.Может кто-нибудь сказать мне решение для этого заранее спасибо.

Answer 1

Добавьте это ниже css, это будет работать ...

.navbar-light .navbar-nav > li {
  position: relative;
}