CSS :after, content: having two values?

Question

I've got CSS on my links depending what type of link it is. In this case it's password protected, and external link.

So I've got CSS like this:

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);}

However when I try something like this:

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

It only displays the last icon, in this case the icon-lock.png. Which makes sense, since the content value can only be set once not combined, so the last class declaration is overwriting it. Is there anyway to combine these two so I can mix and match these link classes easily (I've got 4 total). I don't want to make separate classes/images for each combo.

Answer 1

Hate to break it to you, but you're going to have to make separate classes/images for each combo. Especially as there would be no way of knowing which content should go first.

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

vs

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