CSS:之后,内容:有两个值？

Question

我的链接上有CSS,取决于它的链接类型.在这种情况下,它受密码保护,外部链接.

所以我有这样的CSS:

a.external-link:after { padding-left: 2px; content: url(../images/icon-external-link.gif); }
a.restricted-link:after { padding-left: 2px; content: url(../images/icon-lock.png);}

但是,当我尝试这样的事情时:

<a class="external-link restricted-link" href="some link">Some Link</a>

它只显示最后一个图标,在本例中为icon-lock.png.这是有道理的,因为内容值只能设置一次不合并,所以最后一个类声明会覆盖它.无论如何要将这两者结合起来,以便我可以轻松地混合和匹配这些链接类(我总共有4个).我不想为每个组合制作单独的类/图像.

Answer 1

讨厌给你打破它,但你将不得不为每个组合制作单独的类/图像.特别是因为无法知道哪些内容应该先行.

a.external-link.restricted-link:after
{
  content: url(ext) url(res);
}

VS

a.external-link.restricted-link:after
{
  content: url(res) url(ext);
}