CSS - Create a custom dotted line out divs

Question

I want to create a line with circles. Can this be done with background-repeat? Or do I need to set a picture as background? The circles should have a 5px radius.

p:after {
   content: '';
   background: 'rounded div of size 10x10px' repeat-x
   width: 50%;
}

Please, provide code or fiddle, hard to understand what you want. — Kristine, Sep 03 '15 at 13:17
@DariuszSikorski but these are not rounded, like border-radius: 50% — vuvu, Sep 03 '15 at 13:23
@vuvu, Maybe create a fiddle for this, it's really hard to understand Your question. — Dariusz Sikorski, Sep 03 '15 at 13:25
You seem to be looking for some like the gradient provided in my answer here - http://stackoverflow.com/questions/4898287/how-to-display-text-a-dotted-line-then-more-text-spanning-the-width-of-the-page/28629080#28629080. Look at the gradient used within the `.row:after` selector. — Harry, Sep 03 '15 at 13:30
@timo I added a picture, the circles should have a 5px radius — vuvu, Sep 03 '15 at 13:31
@vuvu Your picture doesn't realy clarify it, how is this not just achieved with a `border: dotted 10px lightgrey;` ? http://jsfiddle.net/0bj9wexd/ Just found out that Chrome interprets dotted borders different from Firefox. Which is probably your issue. — timo, Sep 03 '15 at 13:33

score 2 · Accepted Answer · answered Sep 03 '15 at 13:51

This is the only solution without using background-image or border-image encoded in base64 or using external files.

https://jsfiddle.net/3r6xsr0m/

html:

<div class="line"></div>

css:

.line:before {
    content: "..................................................................................................";
    display: block;
    font-size: 60px;
    font-family: Georgia;
    color: #aaa;
    max-width: 100%;
    overflow: hidden;
}

Dots may differ depending of browser font rendering algorithm.

score 0 · Answer 2 · answered Sep 03 '15 at 13:23

You'll have to create a 10px x 10px image of the dot and then use your method of repeating the background using either pseudo or just a new element. I'd go with a new div element if you can to prevent any issues across browsers like IE8. You'll also have to give your element a width if you go pseudo.

CSS - Create a custom dotted line out divs

2 Answers2