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
Where I need to be
Thanks for advance.
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;
}
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;
}
Here you can play with content and letter-spacing. Hope it helps :)