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

Question

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

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

＆安培; CSS

&::before {
        content: url("plus.png");
    }

我试过

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

并且

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

有关如何实现这一目标的任何想法？谢谢！

Answer 1

改为使用margin-right。

li::before {
    content: url("http://placehold.it/10x10");
    margin-right: 5px;
}
li {
    list-style-type: none;
}

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

Answer 2

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

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

使用margin命令可以在元素周围创建空格。