add content nth-child to pagination

I’m using a pagination plugin on my website called Wp-PageNavi.

it works fine and help me to navigate between pages from a same category.

the result looks like this : (when on page 4 for example) :

PREVIOUS PAGE 2 3 … 5 6 NEXT PAGE

the two previous pages links are displayed, and the two next pages.

I’m trying to customize css to add separation using “-“, so I tried after{content:”-“}, and last-child:after{content:””}, so I don’t have a separation at the last page…

the problem is that depending on the page we are looking, the class change from page smaller, to page larger, to current..

I can find out how I can customize my CSS…

here is the html code generated by the plugin :

<div class='wp-pagenavi'>
<a class="previouspostslink" href="http://kookai-blog.soixanteseize-lab.com/category/hit-de-la-semaine/page/3/">Page Précédente</a>
<a class="page smaller" href="http://kookai-blog.soixanteseize-lab.com/category/hit-de-la-semaine/page/2/"><li>2</li></a>
<a class="page smaller" href="http://kookai-blog.soixanteseize-lab.com/category/hit-de-la-semaine/page/3/"><li>3</li></a>
<span class='current'>...</span>
<a class="page larger" href="http://kookai-blog.soixanteseize-lab.com/category/hit-de-la-semaine/page/5/"><li>5</li></a>
<a class="page larger" href="http://kookai-blog.soixanteseize-lab.com/category/hit-de-la-semaine/page/6/"><li>6</li></a>
<a class="nextpostslink" href="http://kookai-blog.soixanteseize-lab.com/category/hit-de-la-semaine/page/5/">Page Suivante</a>
</div>

and my css :

.wp-pagenavi{position: relative;
border-bottom: 1px solid;
display: inline-block;
width: 657px;
font-family: 'FuturaPT-Medium';
font-size: 14px;
line-height: 30px;
margin-left: 96px;
text-align: center;}
.previouspostslink{position: absolute;
left:0;top: 0;
cursor: pointer}
.nextpostslink{
position: absolute;
right:0;top: 0;
cursor: pointer}
.wp-pagenavi {}
.wp-pagenavi a, .wp-pagenavi span {list-style: none;}
.wp-pagenavi li{list-style: none;display: inline-block;margin-right: 5px}
.wp-pagenavi li:after{content:"-";}
.wp-pagenavi span.current{margin-right: 5px}
.wp-pagenavi a:hover, .wp-pagenavi span.current {}
.wp-pagenavi .current {}

here is a jsfiddle : http://jsfiddle.net/WNmPc/2/

hope someone can help me with this, I’m sure there must be a solution, but I can’t find how… maybe using jquery ?

thanks a lot