How to add a custom shape or background to bottom of current menu item

Question

I want to add some kind of thick line underneath my currently active<li> items. Problem is, I can't set it up properly. I want the line underneath to inherit the width of its respective <li> or at least to be centered ...

Here's my fiddle

Much appreciated

Answer 1

If you want an absolutely positioned element to inherit the width of it's parent, you need to position that parent relatively. More info here. For your situation, you need to :

1. Add position:relative; to .nav li
2. Add width :100%; left:0; and remove margin-left: -6em; on nav li.current a:after, nav li a:hover:after

FIDDLE

Answer 2

You seem to be adding the :after content in two places which seems excessive.

Since you only want in on active 1i you can strip down your code as follows:

CSS

nav ul {
    list-style: none;
    margin-top: 1.25em;
}

nav ul li {
    display: inline-block;
    position: relative;
}

nav li a {
    color: black;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1em 1.25em;
    width: auto;
}

nav li.current a, nav li a:hover {
    text-decoration: underline;
}

nav li.current:after {
    background-color:black;
    content: "";
    height: 1em;
    position: absolute;
    left:0;
    top: 100%;
    width: 100%;
}

JSFiddle Demo