CSS Check if icon (i) comes before or after text inside a button

Question

I'm trying to figure out how I can check with CSS if inside a button, an icon comes before or after the text, so I can manipulate it.

For example:

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

or

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

How can I manipulate the size of the icons, depending on the position relative to the text?

I don't think that's possible. But why don't you just use two different classes? "fa fa-plus before" and "fa fa-plus after"? — Secespitus, Jun 28 '17 at 10:55
@Secespitus I could, but it's one extra step - if there's a built in solution, that's of course better :) — user3192978, Jun 28 '17 at 10:58
Or, simply remove `` altogether and instead style your `` with some `padding-left` and `background-image` to show the appropriate icon? I don't really understand the whole *`i` for icon* trend, to be honest (also [see this comment by deceze](https://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span#comment20308267_14555422)). — domsson, Jun 28 '17 at 10:58
Essentially, you can't. **Text** is not an element and so cannot be selected by CSS. You would need javascript or change the HTML as suggested below. — Paulie_D, Jun 28 '17 at 11:02

score 3 · Accepted Answer · answered Jun 28 '17 at 10:58

3

wrap the text with a span and you can do that

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>

answered Jun 28 '17 at 10:58

dippas

58,591
15
114
126

1

But does this let him style the *icon* differently based upon its position or just the span/text itself? – domsson Jun 28 '17 at 10:59
2

@domdom, just use `i:first-child` and `i:last-child` to style them differently – Pete Jun 28 '17 at 11:00

CSS Check if icon (i) comes before or after text inside a button

1 Answers1