0

Is it possible to target element that is before and after text. For example:

<button><i class="icon user"> User</button>
<button>User <i class="icon user"></button>

So basically I would like to be able to assign margin left/right to .icon depending if before or after text.

I tried using pseudo :first-child, :last-child, but that does not work.

I know that wrapping text in another container like

<button><span>User</span> <i class="icon user"></button> will give me access to it, but I'm trying to minimize html markup

Alko
  • 1,421
  • 5
  • 25
  • 51
  • If you know where your text will be, you can just add margin to that side. But if it is random, the simplest and javascript-less approach would be to enclose the text and give a margin to it like you said. –  Dec 09 '17 at 17:51
  • You are missing the closing tags for `` and yes it's possible if you close the tags properly. For the first one, target `` in your `CSS` and for the other one, target the the ` – Vladimir Jovanović Dec 09 '17 at 17:53
  • @Vladimir Jovanović thats not going to work. I need to add padding/margin between text and icon, not button itself. Also tag already uses ::before for rendering font icons – Alko Dec 09 '17 at 20:33

0 Answers0