CSS: after, content: has two meanings?

Question

I have CSS on my links, depending on the type of link. In this case, it is protected by a password and an external link.

So I have 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);} 

However, when I try to do something like this:

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

It displays only the last icon, in this case the -lock.png icon. This makes sense since the value of the content can only be set once if it is not merged, so the last class declaration overwrites it. Is there a way to combine these two so that I can easily mix and match these link classes (I only have 4). I do not want to create separate classes / images for each combo.

Answer 1

I hate to break it for you, but you will need to make separate classes / images for each combo. Moreover, there was no way to find out what 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); }