Using HTML in CSS After Tag for Hover State

Question

I am currently trying to pass in some html into the the :after pseudo class in css to add an arrow after a link once hovered on. I have seen this done quite some time ago in the stock WordPress theme that used to ship with the default install. I feel like I must me missing something simple.

a:hover:after{content: "&raquo;"}

thank in advance!

Dustin Laine · Accepted Answer · 2011-03-07 23:53:23Z

7

You need to use the hex value \00BB.

http://jsfiddle.net/durilai/AGDbH/

answered Mar 7, 2011 at 23:53

Dustin Laine

38.7k10 gold badges90 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jeffreynolte Over a year ago

Thanks Dustin! I knew it was something simple.

Dustin Laine Over a year ago

Nifty little tool to convert for you: evotech.net/articles/testjsentities.html

David Thomas · Accepted Answer · 2011-03-07 23:53:40Z

1

You're looking for, I think:

a:hover:after
{
content: "\00bb";
}

JS Fiddle demo

Link to reference: http://css-tricks.com/snippets/html/glyphs/

answered Mar 7, 2011 at 23:53

David Thomas

254k53 gold badges382 silver badges421 bronze badges

2 Comments

Yahel Over a year ago

Is there a particular reason you need to use the hex value instead of »?

David Thomas Over a year ago

Honestly I have no idea why CSS relies upon this method of character encoding, but the 'particular reason' is that it works this way. Which is a bad, bad, unhelpful answer...

Collectives™ on Stack Overflow

Using HTML in CSS After Tag for Hover State

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related