css3 - Creating leading and following dots in CSS -

i'm trying create following effect in css:

here did:

<a class="read-more" href="#"><span>see more</span></a> 

and css:

.read-more{     display: inline-block; }  .read-more span:before{     content: '...';     width: 20px; } .read-more span:after{    content: '..................';    width: 60px; } 

however; dots displayed in line base of link. can offer better solution or know how bring dots in line middle of link?

use \b7 instead code middot

.read-more{     display: inline-block; }  .read-more span:before{     content: '\b7\b7\b7';     width: 20px; } .read-more span:after{    content: '\b7\b7\b7\b7\b7\b7\b7\b7\b7\b7\b7';    width: 60px; }