Ciao a tutti

Ho bisogno di un piccolo aiuto, spero che qualcuno mi possa aiutare.

Ho creato l'effetto grazie al quale in una lista non ordinata ho inserito una piccola immagine a forma di freccia a sinistra del singolo listato. Quando sono in "hover" compare un'altra freccia di colore diverso. Il codice utilizzato è questo:
codice:
.correlati li {	padding:3px 0px 3px 0px;
	font-size:14px;
	list-style:none;
	margin:0px;
	border-bottom: 1px dotted #8080BF;
	}
.correlati a {
	display:block;
	margin-left:1px;
	background-image:url(../immagini/sprit.png);
	background-repeat:no-repeat;
	background-position:0px -1px;
		}
.correlati a:link,
.correlati a:visited{
	text-decoration:none;
	color:#00F;
	padding-left:8px;
	}
.correlati a:hover,
.correlati a:focus,
.correlati a:active{
	text-decoration:none;
	color:#666;
	background-image:url(../immagini/sprit.png);
	background-repeat:no-repeat;
	background-position:0px -51px;
	}
L'effetto è sostanzialmente questo:

> link

Ora vorrei creare questo effetto:

link <

in cui la freccia è a destra del link e quindi all'estremità destra anche del tag <li></li>

Come posso fare?

Spero di essermi spiegato bene...grazie a tutti.