CSS检查图标(i)是在按钮内的文本之前还是之后

Question

我试图弄清楚我如何在文本之前或之后进行css查看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包裹文本，您可以做

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

<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>