CSS Selector: стиль элемента слева или справа от текста

Question

У меня есть кнопка, которая содержит значок и возможность добавить текст.Этот текст не является обязательным и может быть слева или справа.В зависимости от положения поле значка может быть разным.

Это означает:

• , если значок находится на левой стороне, он должен иметь margin-left , например, 5px
• , если он находится на right -hndside, margin-right должно быть, например, 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>