CSS styles question.

Question

Is there a way to add special characters ♦ through CSS styles if so can you show an example that works on most browsers?

Answer 1

You can use the :after and :before pseudoelements, however they are not supported by all browsers, have a look at

http://www.w3schools.com/css/pr_pseudo_after.asp http://www.w3schools.com/css/pr_pseudo_before.asp

Answer 2

No, it is not possible, as such.

When using :after { content: }, you cannot specify HTML tags nor entities in the content string. You can, however, specify the symbols directly. (This is because the content string is not parsed as XML/HTML, but as plain text, and is inserted verbatim.)

In other words: a:after { content: "<" } will yield the equivalent visual to <a href="#">Some Link</a>&amp;lt;.

a:after { content: "♦" }; will work perfectly, tho'.

Answer 3

You should always avoid using CSS content because it's wrong to mix presentation with content of the page.

Additionally, CSS content is not supported by some browsers, i.e. by IE6 and IE7.

If I wanted to do it, I'd use CSS to attach background image and add some HTML element around the word:

<style type="text/css">
abbr { padding-right:20px; 
background:url("http://img690.imageshack.us/img690/2005/blackdiamond.png") right no-repeat; }
</style>

<abbr>Something</abbr> very very Important goes here.

Result:

The only problem is - if I can modify the HTML to wrap my word with <span> or <abbr> or any other HTML element I could probably just wrtite ♦ in the code itself... your call.