CSS Cover Image 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 special 16x16 image image (/images/asc.png), placing the image right to the right of the text. Is it possible?

NOTE. I can not change the markup. I can only apply styles; my next weak 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; 
}

. " ".

Answer 1

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

float - , . inline, inline-block: http://jsbin.com/abeme

color: transparent , .

Answer 2

, , , A. : : ( ) - , .

Answer 3

Delete float and display: block for text that appears next to the text "My Heading".