solucionado de nuevo:
para que los puntos suspensivos vayan delante habia que cambiar el before por el after:
Código HTML:
ul li:[U]after[/U]{
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . . "
}
y agregar estas dos lineas:
Código HTML:
ul span + span {
float: right;
padding-left: 0.33em;
background: white;
[U]position: relative;
z-index: 1;[/U]
}