How add a downarrow after an element with CSS? [duplicate]

Question

I would like to add arrows to my sortable table on this page

What I tried is adding this code to the css:

table th.headerSortUp:after { content: " &uarr;"; } table th.headerSortDown:after { content: " &darr;"; }

But that will not display the arrows "↑" and "↓" but the html-entities instead: "↑" and "↓"

or even better would be the up- and downward arrow I found here: http://graphemica.com/search?q=ARROW+TO+BAR

Fabrizio Calderan · Accepted Answer · 2013-10-15 07:57:27Z

10

try using theirs unicode positions instead

table th.headerSortUp:after { content: " \2191"; } table th.headerSortDown:after { content: " \2193"; } table th:after { color: #123456; }

answered Oct 15, 2013 at 7:46

124k26 gold badges171 silver badges183 bronze badges

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

2 Comments

thanks, I used \2912 and \2913 for ⤒ and ⤓ now. How can I give the arrows another color than the rest of the content of the th?