li :: before

Question

Fiddle

我正在尝试设置每个<li>项目的样式，以便在每个<li>之前有一个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== 
);
}

Answer 1

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

它需要......

font-size: 0;

否则，图像会偏移。

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

Answer 2

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

然后您可以使用background-size

调整大小

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

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

当图像比字体大小小时，

line-height:0不起作用。不知道为什么，但有神秘的顶级空间。请参阅代码段示例的第5行。

＆＃13;

＆＃13;

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==);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;