Html 如何在我的元素和psuedo元素之间添加空格？

我正在使用：：before选择器在菜单中的每个列表项之前添加一个图像，我只想在图像和文本之间添加一个空格。这是标记

<ul>
   <li>menu 1</li>
   <li>menu 2</li>
   <li>menu 3</li>
</ul>

我试过了

  &::before {
        content: url("plus.png") + "\00a0";
    }

及

---

有什么办法可以做到这一点吗？谢谢

改用右边距

li:：之前{
内容：url（“http://placehold.it/10x10");
右边距：5px；
}
李{
列表样式类型：无；
}

菜单1
菜单2
菜单3

&：：之前{
内容：url（“plus.png”）；
右边距：10px；
}

菜单1
菜单2
菜单3

---

使用margin命令会在元素周围留下空白。

为什么不使用

右边距

？使用边距是纯html和css实现这一点的最佳方法。是的，这很有效。谢谢，现在还有一个问题，如果我在悬停状态下使用“border bottom”，我如何在文本而不是图像/伪元素下加下划线？这可能吗？您可以在文本周围使用标记

  &::before {
        content: url("plus.png") + "\00a0";
    }

&::before {
        content: url("plus.png" + "\00a0" );
    }

&::before {
    content: url("plus.png");
    margin-right: 10px;
}

<ul>
     <li>menu 1</li>
     <li>menu 2</li>
     <li>menu 3</li>
</ul>