html - 我如何将边距顶部添加到跨度的图像部分？

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