CSS :: after（和:: before）无法按预期工作

Question

我在使用CSS伪选择器::after和::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>

我希望图标在每个相应的跨度之后显示，但是由于某些原因，它们都在第一个跨度之前显示在之前。我还观察到使用::before而不是::after会发生同样的情况。

我在做什么错了？