Html li:：before中图像前不需要的空格

我正在尝试为每个

项目设置样式，以便在每个

之前都有一个6x10箭头图像

6x10图片有白色背景，三角形/箭头本身是透明的

因为我需要这些箭头具有不同的颜色，所以我们的想法是设置：：before伪元素的背景色，以便通过图像的透明部分可以看到该颜色

然而，最终得到的：：before伪元素的值是20px，而不是10px。在图像前后都有一些不需要的空间，在那里我可以看到伪元素的背景色

如何删除图像顶部和底部的空间

下面是它现在的样子：

下面是期望的结果：

下面是上面小提琴中显示列表前图像的CSS的相关部分：

li:not(:first-child)::before {
  display: inline-block;
  width: 6px;
  height: 10px;
  background: #00b2b5;
  vertical-align: middle;
  /* white+transparent right pointing arrow */
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAKCAYAAACXDi8zAAAAW0lEQVQIW43PPQ5AQBBA4bdRKPRKV1C7hBM4j1Oo1eJ8kicrS8iSmGpmvmR+gpsDBRNQcosQc7UDFqA+7YCEDbACbawvSFgBM9A/IGHsjf9AzUep+fLXc78e3AE6bibzAA1JJgAAAABJRU5ErkJggg== 
);
}

试试这个：

它需要

font-size: 0;

否则，图像会偏移

更好的方法是使用CSS三角形：

尝试以下方法：

它需要

font-size: 0;

否则，图像会偏移

---

更好的方法是使用CSS三角形：

使用图像作为伪元素的背景，而不是伪元素的内容

然后，您可以使用

背景大小

li{
列表样式类型：无；
}
李：第一个孩子：以前{
显示：内联块；
宽度：23px；
高度：23px；
背景#00b2b5；
边界半径：50%；
垂直对齐：中间对齐；
/*这里会有另一张图片*/
内容：“；
}
李：不是（：第一个孩子）：：以前{
显示：内联块；
宽度：6px；
高度：10px；
背景#00b2b5；
垂直对齐：中间对齐；
内容：“；
背景图片：url（数据：image/png；base64，ivborw0kggoaaaansuheugaaaaaaakcayacxdi8zaaaaw0leqvqiw43ppq5aqbba4bdrkprkv1c7hbm4j1oo1ej8kicrs8ismgpmvmvmmr+gpsdbrnqcos7udfqa+7ycedbawvsfgbm9a/IGHsjf9AzUep+flxc78e6bibzaa1jgaaabjgru5erjggg=）；
背景尺寸：6px 10px；
背景重复：无重复；
}

测试
测试
测试
测试
测试

使用图像作为伪元素的背景，而不是伪元素的内容

然后，您可以使用

背景大小

li{
列表样式类型：无；
}
李：第一个孩子：以前{
显示：内联块；
宽度：23px；
高度：23px；
背景#00b2b5；
边界半径：50%；
垂直对齐：中间对齐；
/*这里会有另一张图片*/
内容：“；
}
李：不是（：第一个孩子）：：以前{
显示：内联块；
宽度：6px；
高度：10px；
背景#00b2b5；
垂直对齐：中间对齐；
内容：“；
背景图片：url（数据：image/png；base64，ivborw0kggoaaaansuheugaaaaaaakcayacxdi8zaaaaw0leqvqiw43ppq5aqbba4bdrkprkv1c7hbm4j1oo1ej8kicrs8ismgpmvmvmmr+gpsdbrnqcos7udfqa+7ycedbawvsfgbm9a/IGHsjf9AzUep+flxc78e6bibzaa1jgaaabjgru5erjggg=）；
背景尺寸：6px 10px；
背景重复：无重复；
}

测试
测试
测试
测试
测试

默认情况下，图像是

显示：内联的。它被视为一个字符，默认值
垂直对齐：基线
。添加图像顶部和底部的补码空间，以便元素高度>=文本高度

来解决此问题。将：：before元素更改为
显示：内联块
，设置
垂直对齐：中间
，并设置
字体大小：0
。请参阅代码片段示例的第6行。

行高：0
在图像比字体小得多时不起作用。不知道为什么，但有神秘的顶部空间。请参阅代码段示例的第5行


li{
列表样式类型：无；
边缘底部：5px；
/*默认行高为1.2 x字体大小*/
字体系列：Verdana；
}
李：第n个孩子（单数）{
背景色：红色；
}
李：第n个孩子（偶数）{
背景颜色：橙色；
}
li:n子（1）{font size:10px}
li:n第n个子（2）{font size:20px}
li:n子（3）{font size:30px}
李：第n个孩子（4）{
字体大小：40px；
线高：60px；
}
李：第n个孩子（5），李：第n个孩子（6）{
字体大小：60px；
}
李：以前{
背景：青色；
/*垂直对齐：基线*/
/*base64图像为10x20黑色*/
内容：url（数据：image/gif；base64，R0LGODLHCGAUAIAAAAAAAAAAP///YH5BAAAAAAAAKABQAAAIMHI+py+0Po5y02usKADs=）；
}
李：第n个孩子（5）：：之前{
显示：内联块；
线高：0；
垂直对齐：中间对齐；
内容：url（数据：image/png；base64，ivborw0kggoaaaansuheugaaaaakcayacxdi8zaaaw0leqvqiw43ppq5aqbba4bdrkprkv1c7hbm4j1ej8kicrs8ismgpmvr+gpsDBRNQcosQc7UDFqA+7YCEDbACbawvSFgBM9A/IGHsjf9AzUep+flxc78e3bae6bibzaa1jgaaabjaabjru5erjggg=）；
}
/*这就是答案*/
李：第n个孩子（6）：：之前{
显示：内联块；
字号：0；
垂直对齐：中间对齐；
内容：url（数据：image/png；base64，ivborw0kggoaaaansuheugaaaaakcayacxdi8zaaaw0leqvqiw43ppq5aqbba4bdrkprkv1c7hbm4j1ej8kicrs8ismgpmvr+gpsDBRNQcosQc7UDFqA+7YCEDbACbawvSFgBM9A/IGHsjf9AzUep+flxc78e3bae6bibzaa1jgaaabjaabjru5erjggg=）；
}


1试验
2试验
3试验
4试验
5试验
这就是答案

默认情况下，图像为
display:inline
。它被视为一个字符，默认值
垂直对齐：基线
。添加图像顶部和底部的补码空间，以便元素高度>=文本高度

来解决此问题。将：：before元素更改为
显示：内联块
，设置
垂直对齐：中间
，并设置
字体大小