html - 在某些wordpress用户名旁边添加“flair”

就像标题说的那样，我想在我的wordpress网站中的某些（不是全部）用户旁边添加“天赋”。与reddit的执行方式非常相似，但更多地用于YouTube如何添加“经过验证的”用户（基本上是我将使用它的方式）。

YouTube和Reddit示例-http://imgur.com/a/tPHjh

我有用于悬浮的CSS，因此它会更改颜色，但是我不知道如何使其停留在文本/用户名的右边。

的CSS

#verified {left: 10px; width: 9px;}
#verified {background: url(verifieds.png) 0 0;}
#verified:hover {background: url(verifieds.png) 0 -9px;}

的HTML

<p id="verified">test</p>

结果是：http://jirachi.net/hover/hover.html，但是将鼠标悬停在更改上还是有作用的。谢谢您的帮助！

最佳答案

您可以尝试一下，see demo.

#verified {
    padding: 0 5px 0 0;
    width:35px;
    height:18px;
    background: url(http://jirachi.net/hover/verifieds.png) no-repeat right center;
    cursor:pointer;
}

#verified:hover {
    background: url(http://jirachi.net/hover/verifieds.png) repeat-y right -9px;
}