What I want to create:
- a dotted border on top of each
li
-element - the size of the dots and margin between them can change by tweaking the CSS or the image/SVG used)
- the width of the
ul
is responsive, so the border's width varies, too - dots should not be cut/truncated when resizing the viewport, that means only full cirlces should be visible
tl;dr: I don't want this to happen (see the last dot?) when resizing the viewport:
I can't think of a way to create this using:
- repeated background image
- a huge (very long) background image
- border-image
What I got:
I figured out a way to solve it, but it's really annoying. It works, but I would have to generate hundreds of (unecassary) span
-elements as I don't know the maximum width of the element.
The idea is very simply: Dots that don't fit, float into the hidden overflow.
Source
HTML
<ul>
<li>
<div>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>
Item 1
</li>
<li>
<div>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>
Item 2
</li>
</ul>
CSS
ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 60px;
}
ul > li div {
overflow: hidden;
height: 2px;
}
ul > li div span {
float: left;
width: 2px;
height: 2px;
margin: 0 4px 0 0;
background: grey;
}
JSFiddle
Is there a classy way to solve this, like using some nice SVG- or gradient-trick?