CSS Cover link text with Image

Question

<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 16x16 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".

Answer 1

Remove float and display:block for the text to appear next to the "My Heading" text.

Answer 2

If you remove the display block, you won't be able to set your width, height or use text-indent to hide the copy within the A. Try changing display:block to display:inline (since you're floating) instead - it may give you what you need.

Answer 3

a.sort-asc {
    width: 16px;
    height: 16px;
    padding: 0;
    display:inline-block;
    text-indent: 200px;
    overflow: hidden;
    background: url("/favicon.ico") no-repeat; 
}

Removed float - you don't need it, it's on the right position. Text indent does nothing with inline, try inline-block: http://jsbin.com/abeme

Another hack is to add color: transparent, and a small size, but that too hacky.