调整 svg 的大小应用于元素之前和之后

Question

我在“a”标签之前和之后应用了两个 svg 图像，如下所示：

      <li>         
       <a href="#">
        plan
       </a>
      </li>

CSS：

.navigation ul li::before {content:url('left.svg'); position: relative; top: 6px;}
.navigation ul li::after {content:url('right.svg'); position: relative; top: 6px;}

图像出现了，但它们很大，所以我尝试以这种方式调整它们的大小：

      <svg width="10" height="23" viewbox="0 0 102 102">
      <li>
        <a href="#">
          explore
        </a>
      </li>
      </svg>

但 svg 标记并不应用于 svg 图像，它仅将 'a' 标记作为子标记。我真的不知道如何有效/简单地做到这一点 - 我想做的就是确保出现在 a 标签之前和之后的 svg 图像被缩小。

Answer 1

content您可以将其用作 ，background-image并将高度/宽度添加到伪元素，而不是在 内部使用 SVG 图片：

.navigation ul li:before,
.navigation ul li:after {
  content: " ";
  background-image: url('http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg');
  background-size: cover;
  position: relative;
  display: inline-block;
  top: 6px;
  width: 20px;
  height: 20px;
}

<nav class="navigation">
  <ul>
    <li>         
      <a href="#">plan</a>
    </li>
  </ul>
</nav>