Line of dots between items

Strobo picture Strobo · Jul 16, 2014 · Viewed 10.7k times · Source

Restaurant web site and menu. I need to get "line of dots" between menu item and price. I need to get it without writing dots manually one by one. This feature should work automatically.

Is it possible to create this by using background of span or div etc?

Where I am

enter image description here

Where I need to be

enter image description here

Thanks for advance.

Answer

Alex Char picture Alex Char · Jul 16, 2014

I think you look for something like this:

html

<div>
    <div>Marinated Olives</div>
    <div class="dot"></div>
    <div>4.00E</div>   
</div>

css

.dot{
    border-bottom: dotted 3px orange;
    width: 100px;
    float: left;
    position: relative;
    display: block;
    height: 12px;
    margin: 0 5px 0 5px;
}

div:first-child, div:last-child{
    float:left;
}

fiddle

You can play with width to adjust in your likes.

Also another approach using css :after

html

<div>
    <div id="dotted">Marinated Olives</div>   
    <div>4.00E</div>   
</div>

css

div{
    float:left;
}

#dotted::after{
    content: "..................";
    letter-spacing: 4px;
    font-size: 18px;
    color:orange;
    margin-left:20px;
}

fiddle

Here you can play with content and letter-spacing. Hope it helps :)