CSS选择器：样式元素从文本向左或向右

Question

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

这意味着：

• 如果图标位于左侧-手侧，则其左边缘例如5px
• 如果位于右侧，则边距右应该是10px
• 如果根本没有文本，则图标的空白应为2px

有没有什么方法可以设置图标的样式不，而添加其他M和不这样的CSS（帮助器）类来更改标记？也许有一些伪选择器，在这里可以帮上忙吗？

is-right

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>