On our keyboards we have different symbles that have a particular keycode to them that can be used to add to websites but there is a whole list of symbols we can use instead of adding images, so it takes up less space.
You can see an example of this on my demo site and if you go the SubTabDemo Blog link and hover over it you will see in the Orange Categories header one of these arrows. There are so many of these available around the web but a good source for them is here
http://www.w3schools.com/charsets/ref_utf_arrows.asp
This page shows a list of arrows to use but in the left column there are other options. Here is the page showing that and some more of these arrows
So to add them using css we would write it like this
content:'\21B4' ;
It will take font sizes and colour but it inherits your sites colour in case you want to keep that.
So in that demo page this is how I added it using CSS
/* Adding the down arrow */
.subTab-item.sthCategory1 > a:after{content:'\21B4' ;font-size:30px;font-weight:bold;position:absolute}
If you have used the content option in css before you will recognise this type of css code. Basically what the content part means is we are going to add some new content to our page using CSS. It is very wildly used to add a word before something for a particular reason but has many other uses.
It will take a very long time to write up everything of how to use the content option but those of you who have written or used a bit of CSS will understand how it all works.
Hope you find this useful
John :-)
Replies