Hello everyone,
I'm designing a menu for a site, and would like to include a right-pointing arrow ? before each item in the menu.
For accessibility and visual reasons, I would like this arrow to be a character (i.e. the character with the code & # 9 6 5 4 ; with no spaces in between!). It can then be enlarged along with the other characters on the site. This would not be possible if I used a small GIF image.
I would also like the CSS to code this element, as it is essentially a design feature rather than part of the site content and structure. It may be confusing to text-based browsers and accessibility technology to have it sitting there in the markup...
My idea is to use the a:before pseudo class to add the arrow before each link in my menu.
a:before { content: '& # 9 6 5 4 ;' } doesn't seem to work for me. I cannot get the content attribute to recognise any special character code, probably because they all carry the semi-colon as part of the code, which is obviously used in CSS to denote the end of a value.
Any suggestions for how to get past this would be greatly appreciated.
RobJavascript uses the escaped unicode notation like that
'\uxxxx' where xxxx is hexa value
I don't know if CSS uses the same unicode translation, but you may give a try:
I have search for u the unicode translation for '▶' and it appers to be '\u25B6' . Give it a tryA good idea, but... I'm sorry to say but the '\u25B6' just presents that string before each link - it doesn't translate to the desired character.
I am hoping to include a heirarchical menu system, where the right pointing arrow changes to a down-pointing arrow when the submenu is expanded, so maybe a JavaScript solution for that problem could also include the rendering of the arrows too.
Thanks for your suggestion,
Rob
PS: ...and we look forward to Romania's eventual entry into the EU. The more the merrier as far as I'm concerned.This works in Firefox, but of course it doesn't work in IE because it has no idea how to handle any :before or :after pseudo-elements.
p.arrow:before {
content: "\025B6";
}Yep, that seems to work in Safari too. Hopefully other browsers will follow suit and I will be there! Nice one, many thanks.
Its a shame IE doesn't implement this aspect of CSS, but I'm getting used to that sort of thing from IE now. I assume that's not a new moan on this board...
Robcontent: "/00BB";
That makes ».
I'm designing a menu for a site, and would like to include a right-pointing arrow ? before each item in the menu.
For accessibility and visual reasons, I would like this arrow to be a character (i.e. the character with the code & # 9 6 5 4 ; with no spaces in between!). It can then be enlarged along with the other characters on the site. This would not be possible if I used a small GIF image.
I would also like the CSS to code this element, as it is essentially a design feature rather than part of the site content and structure. It may be confusing to text-based browsers and accessibility technology to have it sitting there in the markup...
My idea is to use the a:before pseudo class to add the arrow before each link in my menu.
a:before { content: '& # 9 6 5 4 ;' } doesn't seem to work for me. I cannot get the content attribute to recognise any special character code, probably because they all carry the semi-colon as part of the code, which is obviously used in CSS to denote the end of a value.
Any suggestions for how to get past this would be greatly appreciated.
RobJavascript uses the escaped unicode notation like that
'\uxxxx' where xxxx is hexa value
I don't know if CSS uses the same unicode translation, but you may give a try:
I have search for u the unicode translation for '▶' and it appers to be '\u25B6' . Give it a tryA good idea, but... I'm sorry to say but the '\u25B6' just presents that string before each link - it doesn't translate to the desired character.
I am hoping to include a heirarchical menu system, where the right pointing arrow changes to a down-pointing arrow when the submenu is expanded, so maybe a JavaScript solution for that problem could also include the rendering of the arrows too.
Thanks for your suggestion,
Rob
PS: ...and we look forward to Romania's eventual entry into the EU. The more the merrier as far as I'm concerned.This works in Firefox, but of course it doesn't work in IE because it has no idea how to handle any :before or :after pseudo-elements.
p.arrow:before {
content: "\025B6";
}Yep, that seems to work in Safari too. Hopefully other browsers will follow suit and I will be there! Nice one, many thanks.
Its a shame IE doesn't implement this aspect of CSS, but I'm getting used to that sort of thing from IE now. I assume that's not a new moan on this board...
Robcontent: "/00BB";
That makes ».