css - 根据其内容将图像附加到链接

Question

我有一个系统可以生成指向应用程序不同部分的链接。我需要根据上下文在链接旁边附加一张图片。在 CSS 中我会这样做:

a {    
 color:#FF6600;
 padding-right:50px;
 background-image: url('images/system.png');
 background-position: right;
 background-repeat: no-repeat;

上述 CSS 规则的问题在于所有链接都获得相同的图像。如果链接具有 class="system"，则必须附加 system.png，如果其具有 class="actions"，则必须附加 action.png .我猜我可以使用 jQuery 来执行此操作，有任何指示吗？

Answer 1

a {
    color: #f60;
    padding-right: 50px;
    background-position: right;
    background-repeat: no-repeat;
}

a.system {
    background-image: url("images/system.png");
}

a.actions {
    background-image: url("images/actions.png");
}