0

I am having problems with CSS pseudo selectors ::after and ::before.

.moneygold {
    padding-right: 15px;
}

.moneygold:after {
    content: "";
    display: block;
    background: url(https://i.ibb.co/QDtRsY4/money-gold.gif) no-repeat;
    width: 13px;
    height: 13px;
    float: left;
    margin: 6px 0 0 1px;
}

.moneysilver {
    padding-right: 15px;
}

.moneysilver:after {
    content: "";
    display: block;
    background: url(https://i.ibb.co/mRDQpvD/money-silver.gif) no-repeat;
    width: 13px;
    height: 13px;
    float: left;
    margin: 6px 0 0 1px;
}

.moneycopper {
    padding-right: 15px;
}

.moneycopper:after {
    content: "";
    display: block;
    background: url(https://i.ibb.co/KGSzwYh/money-copper.gif) no-repeat;
    width: 13px;
    height: 13px;
    float: left;
    margin: 6px 0 0 1px;
}
<span class="moneygold">3</span>
<span class="moneysilver">17</span>
<span class="moneycopper">20</span>

I want the icons to show after each of the corresponding spans, but for some reason they all show before the first span . I have also observed the same behavior with using ::before instead of ::after .

What am I doing wrong?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Acidon
  • 1,294
  • 4
  • 23
  • 44
  • 2
    `display:inline-block` to span – Temani Afif Jul 18 '19 at 14:39
  • And remove the float – Lee Jul 18 '19 at 14:42
  • PS @TemaniAfif the answer you've posted to, isn't a duplicate. This question doesn't need floats, and should require a new answer. – Lee Jul 18 '19 at 14:43
  • @Lee he's using float and the duplicate explain the issue of using float inside inline element and gives a solution thus it's a duplicate ... we need float or not is a different story and opinion based – Temani Afif Jul 18 '19 at 14:46
  • IT might be opinion based, but what you've just done is essentially stopped me from providing a valid answer to this question which is DIFFERENT than the one you've linked... – Lee Jul 18 '19 at 14:55
  • I've tried to add `display:inline-block` and removed the float and now it shows under the span instead of right... – Acidon Jul 18 '19 at 14:57
  • 1
    don't remove float, simply add `inline-block` to span element – Temani Afif Jul 18 '19 at 14:58
  • 1
    @TemaniAfif thx, I've returned the float, changed left to right and now it works as intended (forgot I was trying to make a ::before version first). – Acidon Jul 18 '19 at 15:01

0 Answers0