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

【问题标题】：CSS Selector: Style element left or right from textCSS 选择器：从文本向左或向右的样式元素
【发布时间】：2019-07-08 05:48:15
【问题描述】：

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

这意味着：

如果图标在 left 手边，它应该有一个 margin-left 例如5 像素
如果它在 right 手边，margin-right 应该是例如10 像素
如果根本没有文字，图标边距应该是例如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>

【问题讨论】：

你的文字绝对需要在这里裸露吗？如果它被包裹在一个元素中，那会让事情变得更容易。
是的，我知道...然后我可以选择它。但在这种情况下，我无法包装文本元素。在最坏的情况下，我会添加辅助类，但我想避免它们
我个人看不到任何可以让您知道的选择器...所有像 :nth-... 这样的伪类都只考虑元素。 TextNodes 是 CSS 的二等公民。但也许有人知道方法。
还有is something making its way（目前只有Firefox实现：jsfiddle.net/t1mzL4xg）
Is there a CSS selector for text nodes?的可能重复

标签： css css-selectors

【解决方案1】：

如果你做图标inline-block可以考虑word-spacing

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>

【讨论】：

你没有考虑Depending on the position, the margin of the icon differs.
@Daut 这就是我实际所做的，当图标在左侧或右侧时，边距不同......所以如果图标在右侧，我们有一个 margin-left 和一个边距-right 如果在左侧使图标和文本之间的空间始终相同。如果我理解得很好，这就是问题
我看不到，对不起，你能解释一下吗：D
@Daut 你没有看到图标和文本之间的空格吗？这是所需的余量（当然，如果我很好地理解了这个问题）。他想根据位置应用边距，但我找到了另一种使用字间距的方法。所以我不再需要知道位置
@TemaniAfif 谢谢，这已经朝着正确的方向发展。但更具体地说，如果图标在左侧，则图标的左边距为 5px，如果在右侧，则右边距为 10px。我会更新说明