<th> My Heading <a href="#" class="sort-asc" title="sort">Sort Asc</a> </th>
I want to apply CSS to .sort-asc to replace the text "Sort Asc" with a custom 16×16 sort glyph image (/images/asc.png), placing the image directly to the right of the text. Is it possible?
NOTE: I can't change the markup. I can only apply styles; the following is my feeble attempt:
a.sort-asc { float: left; width: 16px; height: 16px; padding: 0; margin: 5px; display: block; text-indent: -2000px; overflow: hidden; background: url("/images/asc.png") no-repeat; }
Currently, the image shows up all the way to the left of the table header cell. I need it to the right of the text "My Heading".
Best Answer
Removed float - you don't need it, it's on the right position. Text indent does nothing with
inline
, tryinline-block
: http://jsbin.com/abemeAnother hack is to add
color: transparent
, and a small size, but that too hacky.