css: link image using sliding doors technique

Question

hi,

i'd like to add a little arrow image (+hover effect) to all hyperlinks by defining a css class. my question: would it be possible using the sliding doors technique for that? the problem with it: i can't set a fixed width for the link (for truncating the image) as the link's text would be ignore that width - any ideas?

thanks

Answer 1

use padding to push the text and put the arrow as background image on the area that the padding is occupying ..

a.arrowclass /*the selector could be just 'a' if you wanted it on all links */ { 
  padding-left:20px;
  background: url(/path/to/arrow.jpg) no-repeat top left;
}