css - 在 div 中移动 CSS Sprite ？

Question

我想做的是用 Sprite 图作为我的链接的背景。然后，当它悬停时，它会变成不同颜色的 Sprite 。下面的代码实现了这一点。

问题是 Sprite 直接在链接文本的上方/后面。有没有办法定位 sprite 相对于文本的显示位置？

如果我更改 background-position，它只会更改用于 Sprite 的像素，而不是 Sprite 的实际位置。提前致谢!

HTML

<a class="sprite-link" href="#">Link Text</a>

CSS

a:hover {
color: black;
}

.sprite-link {
background: url(spriteurl.png) no-repeat;
background-position: 0px 0px;
width: 165px;
height: 45px;
display: block;
}

.sprite-link:hover {
background: url(spriteurl.png) no-repeat;
background-position: 0px -45px;
width: 165px;
height: 45px;
}

Answer 1

您可以使用 ::after 伪元素来实现...

检查 Fiddle .

我没有 Sprite 图，但想象一下示例中的正方形就是它。

CSS

.sprite-link::after {
    content: "";
    padding: 10px;
    background: red;
    width: 165px;
    height: 45px;
    display: block;
}

.sprite-link:hover::after {
    width: 165px;
    height: 45px;
    background: black;
}