Fix gap that appears on an LI element when using :after

Question

Please take a look at this fiddle http://jsfiddle.net/EWUTX/

These are the styles used:

.box { position: relative; display:inline-block;}
.box:after {
    position: absolute;
    width: 100%;
    height: 10px;
    background: green;
    content: '';
    bottom:-10px;
    left:0;
}

I get a small 5px gap when using the style on an li element, but not on a div tag.

If I specify font-size: 0px, the gap goes away. But then all the text within the li disappears.

As the font size of the li increases, the gap widens.

Is there a style to get rid of this gap, without any hard coding of font sizes?

Fiddle again: http://jsfiddle.net/EWUTX/

Thanks

PS: I'm actually building a CSS framework internally where users can specify a status (using classes) like "started", "not-started", etc.

When used, the element should display a small bar below with different colors. Users can use this class on any element.

Answer 1

That gap is part of the line height reserved characters like 'p' letter. You will get the same gap if you don't set a height to your div. If you want to remove that from an inline element like an img you can set the vertical-align to the bottom:

.box img {
    vertical-align: bottom;
}

See: http://jsfiddle.net/DhTzp/

Answer 2

Its the image that crates the whitespace;

img{ display: block; }