CSS Selector：样式元素从文本向左或向右

Question

我有一个包含图标的按钮，可以添加文本。此文本是可选的，可以在左侧或右侧。根据位置，图标的边距不同。

这意味着：

• 如果图标在左侧，则它应该具有例如左边的边距。为5px
• 如果它位于右侧，则边距应为例如10px的
• 如果根本没有文字，那么图标边距应该是例如2px的

有没有办法设置图标的样式而不添加额外的css（帮助）类，如is-right，而不更改标记？也许有一些伪选择器，这可以帮助吗？

<button>
    <span class="icon editIcon"></span>
    Edit
</button>

<button>
    Edit
    <span class="icon editIcon"></span>
</button>

<button>
    <span class="icon editIcon"></span>
</button>

Answer 1

如果你制作图标word-spacing，你可以考虑inline-block

button {
  border:1px solid;
  word-spacing:10px;
}

.icon {
  display:inline-block;
  width:10px;
  height:10px;
  background:red;
}

<button>
    <span class="icon editIcon"></span>
    Edit
</button>

<button>
    Edit
    <span class="icon editIcon"></span>
</button>

<button>
    <span class="icon editIcon"></span>
</button>