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: " ↑";
}

table th.headerSortDown:after {
   content: " ↓";
}

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

Answer 1

try using theirs unicode positions instead

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

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

table th:after {
   color: #123456;
}

See http://www.blooberry.com/indexdot/html/tagpages/entities/arrow.htm for other arrow symbols.