Creating leading and following dots in CSS

Question

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?

Is the span element really necessary? You should be able to achieve this look without it. — cimmanon, Jul 15 '13 at 20:47

score 4 · Accepted Answer · answered Jul 15 '13 at 20:42

4

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;
}

answered Jul 15 '13 at 20:42

Stefan

2,961
1
22
34

Instead of using a hexadecimal character code, I'd recommend using the HTML entity · -- same result, greater portability. Upvoted anyway, as your answer best fits the question, but it'd be better still for the change. – Aaron Miller Jul 15 '13 at 20:44
3

@AaronMiller CSS 'content' does not accept named entities or regular numeric entities such as @, but does render ASCII text and unicode. http://stackoverflow.com/questions/190396/adding-html-entities-using-css-content – Stefan Jul 15 '13 at 20:46
@stefan Good to know; until I read your answer, I had no idea you could even specify content in CSS, and I'd have thought it would be rendered the same way any other document content would -- but I suppose, if we're going to throw out separation of concerns and have content in our CSS files anyway, there's no reason for me to assume it should be implemented in a conceptually sound fashion, is there? :) Thanks for the info! – Aaron Miller Jul 15 '13 at 20:51

score 1 · Answer 2 · answered Jul 15 '13 at 20:44

1

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)

answered Jul 15 '13 at 20:44

drip

12,378
2
30
49

score 1 · Answer 3 · answered Jul 15 '13 at 20:48

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/

score 0 · Answer 4 · answered Jul 15 '13 at 20:41

0

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

answered Jul 15 '13 at 20:41

Mike

1,559
10
17

1

FYI, · is positioned as • but has the same weight as a period. – Aaron Miller Jul 15 '13 at 20:44
@AaronMiller Touche... I've somehow overlooked that all these years – Mike Jul 15 '13 at 20:46
It's not really something you find until you go looking for it. – Aaron Miller Jul 15 '13 at 20:52

score 0 · Answer 5 · answered Jul 15 '13 at 20:41

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.

Creating leading and following dots in CSS

5 Answers5