We all like links that look like this:
But there's the tricky part of sticking those French quotes (» or «) in every little link, and the trouble that search engines can have parsing them (Yahoo at least has trouble displaying them). The answer can be had in the CSS :before and :after pseudo-elements. Pseudo-elements are supported by Firefox and Safari. So far IE has not supported them, but they degrade quite nicely (into nothing).
The method
The trouble is that the method is not particularly logical or well documented. W3Schools shows examples of the :before element with an image or a sound, but not text. It doesn't help that they're HTML special characters, and the ampersand codes only work in HTML. The solution is to use Unicode values:
.arrow:before
{content:'/0BB /0A0';
}
Quick reference:
- /0BB is a
»» - /0A0 is a
- /0AB is a
»« - /03C is a
<< - /03E is a
>>
There's a complete list at http://www.alanwood.net/demos/ansi.html.
You can also find these codes in Charmap, which comes with Windows. Charmap will give a code like U+00AB. Remember to replace the "U+" with a backslash. CSS treats the expression the same with or without the leading zero, so /00AB is as acceptable as /0AB.
Note that :before and :after pseudo-elements aren't supported by Internet Explorer 6 or 7.
Ann wrote:
September 18, 2009 at 11:25 am | Link to this CommentI think the slashes are supposed to go in the other direction. But thanks so much for helping me get some clarity on how to do this; I was looking everywhere.
Claudio wrote:
January 27, 2010 at 9:08 am | Link to this CommentAnother solution could be putting @charset “utf-8″; in the linked css file (in the firt line, without any character before). Then it’s possible put the “»” straight into the declaration content:” “
Matthew wrote:
March 2, 2010 at 10:55 pm | Link to this CommentHere is another resource.
http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/