Why ::after selector is not working properly in my code?

Question

I use bootstrap 4 for my code. As I use ::after as below

.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;
}

The background color should be shown in all li >a but it shown only left side of the navbar as screenshot in below link. Can someone tell me the solution for this thanks in advance.

Answer 1

Add this below css, this will work...

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