title: Place the Sprite image right side of the anchor tag?
body: <p>I am having the css sprite image.And it works fine but the issue is I want the image right side of the anchor tag's text.But it displays in the left side.The sprite image is here.</p>
  
  <p><a href="http://jstiles.com/temp/1360875952/ctrls/css-sprite.png" rel="nofollow">http://jstiles.com/temp/1360875952/ctrls/css-sprite.png</a></p>
  
  <p>Expected result:</p>
  
  <pre><code>[Mylinktext]&lt;MyImagehere&gt;
  </code></pre>
  
  <p>Actual result what I am getting is </p>
  
  <pre><code>&lt;MyImagehere&gt;[Mylinktext]
  </code></pre>
  
  <p>I don't want to use after pseudo class.Becuase it wont work out in the IE7 browser too.My code is below.</p>
  
  <pre><code>.ctrls
      {
          font-family:Arial;
          font-weight:bold;
          font-size:16px;
          color:black;
          background-image: url(images/ctrlsprite.png);
          //background-image: url(images/css-sprite.png);
          background-repeat:no-repeat;
          text-decoration:none;
          display: inline-block;
          padding-left:30px;  
      }
      .ctrls:hover
      {
          background-position: 0px -252px;
          text-decoration:underline;      
      }
      a.magenta
      {
          background-position:0px -144px;
      }
  </code></pre>
  
  <p>And HTML</p>
  
  <pre><code>&lt;div&gt;
      &lt;p&gt;Magenta&lt;/p&gt;
      &lt;a href="#" class="ctrls magenta"&gt;Et Movet&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I place the image right side of the Text?</p>