CSS Transition effect on my itty bitty arrow

Question

See JsFiddle above. Note the itty bitty arrow that pops under the buttons. Is it possible to make that thing fade in/out with the other elements?

score 2 · Answer 1 · edited May 23 '17 at 12:26

2

Apparently Firefox 4 is the only browser that currently supports the transitioning of pseudo elements:(

edited May 23 '17 at 12:26

Community

answered Jun 19 '12 at 20:05

quoo

score 2 · Answer 2 · edited May 23 '17 at 10:34

2

Consider using a unicode graphical character with some absolute positioning as part of your link, instead of using :after.

edited May 23 '17 at 10:34

Community

answered Jun 19 '12 at 20:07

any idea how to pass unicode into the content attribute of the after pseudo element? – Cameron C Jun 19 '12 at 20:23
You have to use an escaped reference to the unicode value: http://alanhogan.com/tips/css/special-characters-in-generated-content but I think you'll run into the same problem that you cannot transition pseudo elements if you put it in ::after. I think Diodeus is suggesting you put a unicode character in your markup. – quoo Jun 19 '12 at 20:38
That is what I am suggesting. Put an absolutely-positioned element containing the unicode character inside your current element. – Diodeus - James MacFarlane Jun 19 '12 at 20:47

2 Answers2