html - CSS 在 li::before 中设置 SVG 的高度和宽度

Question

我有以下列表，我加载了一些 SVG 作为列表项。如何将 ::before 的高度和宽度设置为例如 30px x 30px？我已经尝试直接使用高度和宽度进行设置，但失败了。有人可以帮助我吗？

<div class="list-div">
<ul class="items-list">
          <li>Dies ist ein Eintrag A</li>
          <li>Dies ist ein Eintrag B</li>
          <li>Dies ist ein Eintrag C</li>
          <li>Dies ist ein Eintrag D</li>
</ul>
</div>

和CSS:

.list-div li {
    opacity:0;
  position: relative;
  display: block;
  margin-bottom: 5px;
  padding: 10px;
  text-align: left;
  visibility: hidden;
  text-transform: uppercase;
}
  .list-div li:nth-child(1){
background: url(some_image.svg);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;
}
.list-div li:nth-child(2){
background: url(some_image.svg);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;

}
.list-div li:nth-child(3){
background: url(some_image.svg);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;

}

.list-div li:nth-child(4){
background: url(some_image.svg);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;
}

Answer 1

看看这个:

.list-div li {
  display: block;
  margin-bottom: 5px;
  padding: 10px;
  text-transform: uppercase;
}

.list-div li span {
  line-height: 30px;
  height: 30px;
  vertical-align: top;
}

.list-div li:before {
  content: '';
  width: 30px;
  height: 30px;
  display: inline-block;
  margin-right: 10px;
  background-size: cover;
}

.list-div li:nth-child(1):before {
  background-image: url('https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png');
}
.list-div li:nth-child(2):before {
  background-image: url('https://cdn1.iconfinder.com/data/icons/picons-social/57/stackoverflow-512.png');
}
.list-div li:nth-child(3):before {
  background-image: url('https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/home-512.png');
}
.list-div li:nth-child(4):before {
  background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-512.png');
}

<div class="list-div">
  <ul class="items-list">
    <li><span>Dies ist ein Eintrag A</span></li>
    <li><span>Dies ist ein Eintrag B</span></li>
    <li><span>Dies ist ein Eintrag C</span></li>
    <li><span>Dies ist ein Eintrag D</span></li>
  </ul>
</div>

这使用了您对 :before 的想法选择器与列表项一起显示您自己的图标。定义 content 很重要在此选择器中，即使为空，也不会起作用。图标的大小设置为 30x30px，位于文本的中间。我还添加了一个 background-size: cover标记，以便将图标设置为与您定义的大小相同，这意味着如果您决定稍后缩放图标，它们将同样有效。

为了使文本与图标居中，我将每个文本项包装在 <span> 中标签允许我们只修改文本而不影响列表项本身，或者 :before选择器。在这里，我们只需设置 line-height和 height文字的高度与图像相同。如果要调整图像大小，还需要更改此处的值。

我还对您的代码进行了少量修改，因为您重用了很多不需要重用的代码。例如，您的 :nth-child(x)选择器使用完全相同的代码，只有一个区别——背景图像。为了提高效率，我将所有默认代码放入一个代码块中，这将以与以前相同的方式影响所有列表项。由于背景图像将是列表中唯一发生变化的内容，因此最好将它们作为单独的链接。