Q:Ammending a pseudo-element onto CSS like...

[muogin]

Example:

I've made a button...

a.button-s2:link {
border: 2px solid #000000;
background-color: #ffffff;
color: #000000;
font-size: 90%;
font-weight: normal;
padding: 8px;
text-decoration: none;
}

It works just fine. But I want CSS to generate either some type fx like :: or even better one of HTML's special characters such as the bullet, or arrows etc.

"content" is a pseudo element but I can't seem to get the syntax right to make this happen. Here's one I tried that failed. Any ideas on how I could modify this to get it to work?

a.button-s2:link {
border: 2px solid #000000;
background-color: #ffffff;
color: #000000;
content: "::";
font-size: 90%;
font-weight: normal;
padding: 8px;
text-decoration: none;
}

Thanks,
Muogin

[Paul Jr]

The content: CSS property only applies to the :before and :after psuedo-elements, and is not supported by IE. So, your code would look something like this (you still need your current code for the styles):

a.button-s2:link:after {
content: '::';
}

If you want the “::” to appear before the element, then change the :after to :before. Again, this will not work in Internet Explorer.

[fredmv]

Originally posted by muogin
one of HTML's special characters such as the bullet, or arrows etc.You'll want to be using Unicode (http://www.unicode.org/) for that. Check out this demo page (http://www.alanwood.net/unicode/arrows.html) for tons of unicode arrows. When you use such characters in CSS, however, make sure to properly escape them:content: '\2192';

[muogin]

Thanks! You read my mind, that was to be my next question.

Now which of the columns do I use for input the DECimal or HEX?

If HEX do I enter it exact or do I have to translate it all to numbers somehow?

Example: which on of these would I enter to get this symbol:

∊ 8714 220A SMALL ELEMENT OF

Thanks,
Muogin:)

Originally posted by fredmv
You'll want to be using Unicode (http://www.unicode.org/) for that. Check out this demo page (http://www.alanwood.net/unicode/arrows.html) for tons of unicode arrows. When you use such characters in CSS, however, make sure to properly escape them:content: '\2192';

[muogin]

Hmm, the content property does nothing in IE?

Thanks for the join syntax though indeed.

-Muogin:)

Originally posted by Paul Jr
The content: CSS property only applies to the :before and :after psuedo-elements, and is not supported by IE. So, your code would look something like this (you still need your current code for the styles):

a.button-s2:link:after {
content: '::';
}

If you want the “::” to appear before the element, then change the :after to :before. Again, this will not work in Internet Explorer.

[Paul Jr]

Originally posted by muogin
Example: which on of these would I enter to get this symbol:

∊ 8714 220A SMALL ELEMENT OF
You would use 220A:

a.button-s2:link:after {
content: '\220A';
}


Originally posted by muogin
Hmm, the content property does nothing in IE?
Correct. IE’s CSS support is not very good.