html - li::before 中图像前不需要的空间

Question

Fiddle

我正在尝试为每个 <li> 设置样式元素，以便在每个 <li> 之前都有一个 6x10 箭头图像.

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

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

但是，生成的::before 伪元素原来是 20px 高而不是 10px。图像前后有一些不需要的空间(实际上)，我可以在其中看到伪元素的背景颜色。

如何去除图片顶部和底部的空白？

现在是这样的:

这是期望的结果:

这是上面 fiddle 的 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== 
);
}

Answer 1

试试这个:https://jsfiddle.net/benhull/n3xdk48x/6/

它需要...

font-size: 0;

否则，图像会偏移。

更好的方法是使用 CSS 三 Angular 形:https://css-tricks.com/snippets/css/css-triangle/