CSS检查图标（i）是否位于按钮内的文本之前或之后

Question

我试图弄清楚如果在按钮内部我可以检查CSS，图标在文本之前或之后出现，所以我可以操纵它。

例如：

<a href="#" class="button"><i class="fa fa-plus"></i>TEXT</a>

或

<a href="#" class="button">TEXT<i class="fa fa-plus"></i></a>

如何操作图标的大小，具体取决于相对于文本的位置？

Answer 1

用span包装文本，你可以这样做

＆＃13;

＆＃13;

a {
  display: block
}

a>span:first-child {
  background: red
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<a href="#" class="button"><span>TEXT</span><i class="fa fa-plus"></i></a>

<hr />

<a href="#" class="button"><i class="fa fa-plus"></i><span>TEXT</span></a>

＆＃13;

＆＃13;

＆＃13;