How add a downarrow after an element with CSS?

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-15T07:57:27.117

10

try using theirs unicode positions instead

table th.headerSortUp:after {
   content: " \2191";
}

table th.headerSortDown:after {
   content: " \2193";
}

table th:after {
   color: #123456;
}

edited Oct 15 '13 at 07:57

answered Oct 15 '13 at 07:46

Fabrizio Calderan

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? – rubo77 Oct 15 '13 at 07:56
see the updated answer. – Fabrizio Calderan Oct 15 '13 at 07:57
I solved it with you help like this: https://gist.github.com/rubo77/7003745 also see https://github.com/tcatm/ffmap-d3/pull/35 – rubo77 Oct 16 '13 at 07:06

1 Answers1