CODEWITHSUNDEEP
css
farjam
farjam

Reputation: 2289

Creating leading and following dots in CSS

I'm trying to create the following effect in CSS:

enter image description here

Here is what I did: 

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

And for the CSS: 

.read-more{
    display: inline-block;
}

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

However; the dots that get displayed are in line with the base of the link. Can anybody offer a better solution or know how to bring the dots up so they are in line with the middle of the link?

Upvotes: 0

Views: 1031

Answers (5)

Spudley
Spudley

Reputation: 168655

If you want the element to be a fixed width, you could use a dotted border for this effect.

<div style="padding-left:50px; border-top: 1px dotted black; width:125px;">
  <div style="display: inline-block; position: relative; top: -10px; background-color: white; padding: 0px 10px">text</div>
</div>

Obviously, adjust the padding-left and width to suit your layout needs.

See it in action here: http://jsfiddle.net/LDFQs/1/

Upvotes: 1

drip
drip

Reputation: 12943

Or you can just add a dotted background to the link and mask it with a red background on the span... Simple and effective (as long as the background is solid)

Upvotes: 1

Stefan
Stefan

Reputation: 3041

Use \b7 instead it is the code for the 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;
}

Upvotes: 4

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

You need to set the "read-more" to position:relative, then add position:absolute to your :before and :after elements, specifying the top: and left:/right: positions to get it lined up where you want. You'll need to add some padding to the left of your text as well.

Upvotes: 0

Mike
Mike

Reputation: 1544

Since you are using periods, they naturally occur where periods would occur. One option (of many) could be to use the bullet symbol, &bull;, but it definitely has a heavier weight than a period.

Upvotes: 0

Related Questions