html - 修复使用 :after 时出现在 LI 元素上的间隙

Question

请看看这个 fiddle http://jsfiddle.net/EWUTX/

这些是使用的样式:

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

在 li 元素上使用样式时，我得到一个小的 5px 间隙，但在 div 标签上没有。

如果我指定 font-size: 0px，间隙就会消失。但是 li 中的所有文本都消失了。

随着 li 字体大小的增加，差距变大了。

有没有一种风格可以消除这种差距，而无需对字体大小进行任何硬编码？

再次摆弄:http://jsfiddle.net/EWUTX/

谢谢

PS:我实际上是在内部构建一个 CSS 框架，用户可以在其中指定状态(使用类)，例如“started”、“not-started”等.

使用时，该元素应在下方显示一个不同颜色的小条。用户可以在任何元素上使用此类。

Answer 1

那个间隙是行高保留字符的一部分，比如'p'字母。如果您不为您的 div 设置高度，您将获得相同的差距。如果你想从像 img 这样的内联元素中删除它，你可以将垂直对齐设置为底部:

.box img {
    vertical-align: bottom;
}

参见:http://jsfiddle.net/DhTzp/