2

I have a button which contains an icon, and the possibility to add a text. This text is optional and can be on the left- or on the right-handside. Depending on the position, the margin of the icon differs.

That means:

  • if the icon is on the left-handside, it should have a margin-left of e.g. 5px
  • if it's on the right-handside, margin-right should be e.g. 10px
  • if there is no text at all, the icons margin should be e.g. 2px

Is there any way to style the icon without adding additional css (helper) classes like is-right and without changing the markup? Maybe there is some pseudo selector, which could help here?

<button>
    <span class="icon editIcon"></span>
    Edit
</button>

<button>
    Edit
    <span class="icon editIcon"></span>
</button>

<button>
    <span class="icon editIcon"></span>
</button>
tho-masn
  • 1,126
  • 1
  • 7
  • 13
  • 1
    Does your text absolutely needs to be nude in here? If it was wrapped in an Element that would make things way easier. – Kaiido Feb 14 '19 at 08:58
  • yeah, I know...Then I could select it. But in this case I can't wrap the text element. In the worst case, I'll add helper classes, but I would like to avoid them – tho-masn Feb 14 '19 at 09:00
  • 1
    I personally don't see any selector that could let you know about that... All pseudo-classes like :nth-... are only taking Elements into account. TextNodes are second class citizen for CSS. But maybe someone knows a way. – Kaiido Feb 14 '19 at 09:02
  • alright, thanks anyways! – tho-masn Feb 14 '19 at 09:06
  • 1
    And actually there [is something making its way](https://github.com/w3c/csswg-drafts/issues/3216) (currently only implemented by Firefox: https://jsfiddle.net/t1mzL4xg/) – Kaiido Feb 14 '19 at 09:10
  • 1
    Possible duplicate of [Is there a CSS selector for text nodes?](https://stackoverflow.com/questions/5688712/is-there-a-css-selector-for-text-nodes) – Daut Feb 14 '19 at 09:22
  • @Kaiido That's exactly I was looking for. But also for other browsers. Looks like I have to introduce additional classes – tho-masn Feb 14 '19 at 09:35
  • And looking at the link I posted earlier it sounds like https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim should be the solution for your margin issue. (AFK rn and couldn't test its behavior though) but that's very new – Kaiido Feb 14 '19 at 09:58

1 Answers1

0

You can consider word-spacing if you make the icon inline-block

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • You haven't taken into account `Depending on the position, the margin of the icon differs.` – Daut Feb 14 '19 at 09:16
  • @Daut this is what I actually did, the margin differ when the icon is on the left or the right ... so we have a margin-left if the icon is on the right and a margin-right if on the left making the space between icon and text always the same. This is the question if I understand it well – Temani Afif Feb 14 '19 at 09:18
  • I cannot see it, sorry, could you explain it :D – Daut Feb 14 '19 at 09:21
  • @Daut you don't see the space between the icon and text? this is the margin needed (if of course I understand the question well). he want to apply a margin depending on the position but I found another way to do it using word-spacing. So I no more need to know the position – Temani Afif Feb 14 '19 at 09:25
  • 1
    @TemaniAfif Thanks, thats already going in the right direction. But to be more specific, if the icon is on the left side, the icon should have a left-margin of 5px, and if it's on the right side, the right-margin is 10px. I'll update the description – tho-masn Feb 14 '19 at 09:41
  • @thn also avoid saying *I want to select text* .. you will get closed with irrelevant duplicate, describe your requirement without describing how you think it should be done. We don't need to select the text or the icon – Temani Afif Feb 14 '19 at 09:43