Html 修复使用：after时LI元素上出现的间隙

请看一下这把小提琴

以下是使用的样式：

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

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

如果我指定f

ont size:0px

，则间隙消失。但是

li

中的所有文本都会消失

随着

li

字体大小的增加，差距会扩大

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

再拉小提琴：

谢谢

PS：实际上，我正在内部构建一个CSS框架，用户可以在其中指定状态（使用类），如“

已启动”

”、“

未启动”

”等

---

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

该间隙是行高保留字符（如“p”字母）的一部分。 如果不为div设置高度，则会得到相同的间距。如果要从img之类的内联元素中删除此间距，可以将垂直对齐设置为底部：

.box img {
    vertical-align: bottom;
}

---

请参阅：

它是包装空白的图像

img{ display: block; }

---

你的html是什么样子的，你在你的li上使用了.box吗？@Razz，请看谢谢Razz。您的解决方案可行，但它也会将所有其他元素移到下一行。