Line of dots between items

Question

I am building a restaurant web site and menu. I need to get a "line of dots" between the menu item and the 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?

What I have:

What I want:

You have an example on page https://www.w3.org/Style/Examples/007/leaders.en.html — Zivko, Dec 05 '17 at 16:56

Alex Char · Answer 1 · 2014-07-16T09:31:27.500

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 :)

score 2 · Answer 2 · answered Nov 26 '20 at 21:22

.text-div {
  background-image: linear-gradient(to right, #000 10%, rgba(255, 255, 255, 0) 0%);
  background-position: 0 14px;
  background-size: 10px 1px;
  background-repeat: repeat-x;
  width: 100%;
  height:25px;
}

.text-span {
  background: #fff;
  padding-right: 10px
}

.pull-right {
  float: right;
  padding-left: 10px
}

<ol>
  <li>
    <div class="text-div">
      <span class="text-span">Item:</span>
      <span class="text-span pull-right">$125.00</span>
    </div>
  </li>
  <li>
    <div class="text-div">
      <span class="text-span">Very long name of the item:</span>
      <span class="text-span pull-right">$20.00</span>
    </div>
  </li>
  <li>
    <div class="text-div">
      <span class="text-span">Not long name:</span>
      <span class="text-span pull-right">$30.00</span>
    </div>
  </li>
</ol>

While this might answer the question, if possible you should [edit] your answer to include a short explanation of *how* this snippet answers the question. This helps to provide context and makes your answer much more useful to future readers. — Hoppeduppeanut, Nov 26 '20 at 23:27

score 1 · Answer 3 · edited Jul 16 '14 at 09:47

Use a div with absolute positioning? White backgrounds for paragraphs? Valid for any length of menu-item-name. Play around with it, good luck!

<div class='item_wrapper'>
    <p class='item_name'>Marinated olives</p>
    <p class='item_price'>4,00€</p>
    <div class='dotted_line'></div>
</div>

.item_wrapper{
    width:100%;
    clear: both;
}
.dotted_line{
    border-top:dotted 2px orange;
    position:relative;
    width:100%;
    top:33px;
    z-index:-1;
}
p{
    position:relative;
    background:white;
    padding:0px 10px;
}
.item_name{
    float:left;
}
.item_price{
    float:right;
}

http://jsfiddle.net/MrgBM/

score 1 · Answer 4 · edited Jun 20 '20 at 09:12

something like this?

ol li {
  font-size: 20px
}
.dot-div {
  border-bottom: thin dashed gray;
  width: 100%;
  height: 14px
}
.text-div {
  margin-top: -14px
}
.text-span {
  background: #fff;
  padding-right: 5px
}
.pull-right {
  float: right;
  padding-left: 5px
}

<ol>
  <li>
    <div class="dot-div"></div>
    <div class="text-div">
      <span class="text-span">Item one</span>
      <span class="text-span pull-right">400$</span>
    </div>
  </li>
  <li>
    <div class="dot-div"></div>
    <div class="text-div">
      <span class="text-span">Item two with long text</span>
      <span class="text-span pull-right">400$</span>
    </div>
  </li>
  <li>
    <div class="dot-div"></div>
    <div class="text-div">
      <span class="text-span">Item three midium</span>
      <span class="text-span pull-right">400$</span>
    </div>
  </li>
</ol>

JsFiddle

score 1 · Answer 5 · answered Mar 22 '22 at 10:17

Here is solution using flexbox that spans an arbitrary distance between title and price

.table_of_contents {
    display:flex;
    div:first-child{
        flex:0 1 auto;
    }
    .dot{
        border-bottom: dotted 3px orange;
        height: 12px;
        margin: 0 5px 5px 5px;
        flex: 1 1 auto;
    }    
    div:last-child {
        display:flex;
        flex-direction:row;
        flex: 0 1 auto;
    }
}

score 0 · Answer 6 · answered Jul 16 '14 at 09:11

0

You can use this code to generate the line:

    #helper{

    width:200px;
    border: 1px dashed orange;
}

Source here: http://jsfiddle.net/2j9BN/

answered Jul 16 '14 at 09:11

bloomingsmilez

411
1
6
16

this adds a border all the way around the div, not just on the bottom – Sam Denton Jul 16 '14 at 09:15
yes but you can set the div's height to 1px and it will look as if it were a line – bloomingsmilez Jul 16 '14 at 09:16
Isn't it easier to just use `border-bottom` ? – Ms. Nobody Jul 16 '14 at 09:17
exactly, see my answer above ^^ – Sam Denton Jul 16 '14 at 09:19
+ you should consider changind `dashed` to `dotted` since OP was asking for dots :x – Ms. Nobody Jul 16 '14 at 09:21

score 0 · Answer 7 · answered Jul 16 '14 at 09:13

0

You can use css for this.

If you just add

border: thick dotted;

To the appropriate section of css. This will create a dotted boarder around the whole element it is applied to. If you wish to have just the dots below the element, then use:

border-bottom: thick dotted;

You can also use think dotted or just dotted if you want different sizes.

You can then add orange to get the color:

border-bottom: thick dotted orange;

Hope this helps :)

answered Jul 16 '14 at 09:13

Sam Denton

465
3
18

Note: i posted this before edit to question, so answer is not completly correct see http://meta.stackoverflow.com/questions/265377/answer-posters-alerted-when-question-is-edited – Sam Denton Jul 16 '14 at 09:22

Line of dots between items

7 Answers7

Linked