在 li::before 中的图片之前不需要 space

Question

Fiddle

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

6x10 图片背景为白色，triangle/arrow 本身是透明的。

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

然而，生成的 ::before 伪元素原来是 20px 高而不是 10px。图片前后有一些不需要的 space（真的），我可以在其中看到伪元素的背景色。

如何删除图像顶部和底部的 space？

现在是这样的：

这是期望的结果：

这是上面 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 三角形：https://css-tricks.com/snippets/css/css-triangle/

Answer 2

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

然后您可以使用 background-size

调整大小

li {
  list-style-type: none;
}
li:first-child::before {
  display: inline-block;
  width: 23px;
  height: 23px;
  background: #00b2b5;
  border-radius: 50%;
  vertical-align: middle;
  /* there will be another image here */
  content: "";
}
li:not(:first-child)::before {
  display: inline-block;
  width: 6px;
  height: 10px;
  background: #00b2b5;
  vertical-align: middle;
  content: "";
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAKCAYAAACXDi8zAAAAW0lEQVQIW43PPQ5AQBBA4bdRKPRKV1C7hBM4j1Oo1eJ8kicrS8iSmGpmvmR+gpsDBRNQcosQc7UDFqA+7YCEDbACbawvSFgBM9A/IGHsjf9AzUep+fLXc78e3AE6bibzAA1JJgAAAABJRU5ErkJggg== );
  background-size: 6px 10px;
  background-repeat: no-repeat;
}

<div id="cg-webpart1-outer-block">
  <ul>
    <li>Test test test</li>
    <li>Test test test</li>
    <li>Test test test</li>
    <li>Test test test</li>
    <li>Test test test</li>
  </ul>

Answer 3

图片默认为display:inline。它被视为一个字符，默认为 vertical-align:baseline。图片顶部和底部的补充 space 使元素高度 >= 文本高度。

解决这个问题。将 ::before 元素更改为 display:inline-block，设置 vertical-align:middle，然后设置 font-size:0。请参考代码段示例的第 6 行。

line-height:0 当图像比字体小得多时不起作用。不知道为什么，但有神秘的顶部 space。请参阅代码段示例的第 5 行。

li {
  list-style-type: none;
  margin-bottom: 5px;
  /* default line-height is 1.2 x font-size */
  font-family: Verdana;
}

li:nth-child(odd) {
  background-color: red;
}

li:nth-child(even) {
  background-color: orange;
}

li:nth-child(1) {font-size: 10px}
li:nth-child(2) {font-size: 20px}
li:nth-child(3) {font-size: 30px}

li:nth-child(4) {
  font-size: 40px;
  line-height:60px;
}
li:nth-child(5), li:nth-child(6){
  font-size: 60px;
}

li::before {
  background: cyan;
  /* vertical-align:baseline */
  /* the base64 image is 10x20 black */
  content: url(data:image/gif;base64,R0lGODlhCgAUAIAAAAAAAP///yH5BAAAAAAALAAAAAAKABQAAAIMhI+py+0Po5y02usKADs=);
}

li:nth-child(5)::before {
   display:inline-block;
   line-height:0;
   vertical-align:middle;
  content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAKCAYAAACXDi8zAAAAW0lEQVQIW43PPQ5AQBBA4bdRKPRKV1C7hBM4j1Oo1eJ8kicrS8iSmGpmvmR+gpsDBRNQcosQc7UDFqA+7YCEDbACbawvSFgBM9A/IGHsjf9AzUep+fLXc78e3AE6bibzAA1JJgAAAABJRU5ErkJggg==);
}

/* this is the answer */
li:nth-child(6)::before {
   display:inline-block;
   font-size:0;
   vertical-align:middle;
  content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAKCAYAAACXDi8zAAAAW0lEQVQIW43PPQ5AQBBA4bdRKPRKV1C7hBM4j1Oo1eJ8kicrS8iSmGpmvmR+gpsDBRNQcosQc7UDFqA+7YCEDbACbawvSFgBM9A/IGHsjf9AzUep+fLXc78e3AE6bibzAA1JJgAAAABJRU5ErkJggg==);
}

<div id="outer-block">
  <ul>
    <li>1 Test test test</li>
    <li>2 Test test test</li>
    <li>3 Test test test</li>
    <li><span style="background-color:lightgreen">4</span> Test test test</li>
    <li>5 Test test</li>
    <li>6 This is Answer</li>
  </ul>
</div>

在 li::before 中的图片之前不需要 space

Unwanted space before image in li::before

html

css

pseudo-element