如何在跨度的图像部分上添加页边空白？

Question

所以我在文本之前的图像上出现了一个具有闪闪发光效果的跨度，但是由于某种原因，该图像与顶部对齐。当我摆脱跨度中的图像部分并在其之前使用..时，它工作正常。

当前：

所需结果：

css：

.sapphire-member { 
    color: #0033ff;
    background-image: url(http://resources.guild-hosting.net/201604011348/themes/core/images/tag_fx/sparkle_yellow.gif);
}
.sapphire-member:before {
    content: url(https://puu.sh/D9zBw/ca0f811bca.png);
}

html：

<span class='sapphire-member'>Test</span>

具有img标签的当前html代码，以获得所需结果：

<img src="https://puu.sh/D9zBw/ca0f811bca.png" /><span class='sapphire-member'> 

所以基本上我想知道是否可以在不使用img标签的情况下获得所需的结果？

Answer 1

vertical-align可能就是您想要的。您想避免使用诸如margin-top之类的硬编码来进行垂直居中，因为如果字体大小或其他一些位置发生变化该怎么办？我建议：

<span class='sapphire-member'>Test</span>

.sapphire-member { 
    color: #0033ff;
    background-image: url(http://resources.guild-hosting.net/201604011348/themes/core/images/tag_fx/sparkle_yellow.gif);
    vertical-align: middle;
}
.sapphire-member:before {
    content: url(https://puu.sh/D9zBw/ca0f811bca.png);
    margin-right: 5px;
    vertical-align: inherit;
}

https://codepen.io/anon/pen/YMwGXN