CSS before bottom:0px makes line at bottom

Question

I have the following code for a bootstrap navbar:

.active:before {
 position: absolute;
 margin: auto;
 z-index: 1;
 content: "";
 width: 75%;
 height: 2px;
 background: #e96656;
 bottom: 0px;
 left: 12.5%;
}

But when i put it on, it displays a line under my list element, but also on the bottom of the screen. How do i fix this?

Answer 1

Use .navbar-nav li.active:before { ... } instead.