Create Leading Dots in Css

div {  overflow: hidden;}
ol {  list-style-position: outside;}
.list li {  position: relative;  list-style-position: outside;  list-style-type: lower-alpha;}
.list .list-item {  margin: 1em 0;}
.list .list-item:last-child {  margin: 0 0 2em;}
.list .list-item::before {  content: "..........................................................................";  text-indent: 5px;  letter-spacing: 6px;  position: absolute;  left: 0px;  bottom: 0px;  z-index: -10;}
.list .list-item .text::after {  content: "..........................................................................";  text-indent: 5px;  letter-spacing: 6px;  position: absolute;  left: 0px;  z-index: -10;}
.list .list-item span {  display: inline;  background-color: #fff;  padding-right: 1px;}
.list .list-item .number {  float: right;  font-weight: bold;  color: #198e9d;  background-color: #fff;  padding-left: 17px;}
/* Clearfix */.list .list-item::after {  content: "";  display: block;  clear: both;}

<div>  <ol>    <li>      <ol class="list">        <li class="list-item"><span class="text">Snout as long as rest of head (Fig 6a); gill rakers absent; first dorsal fin with 13 – 27 spines</span> <span class="number"><em>Acanthocybium solandri</em> (wahoo)</span></li>        <li class="list-item"><span class="text">Snout much shorter than rest of head (Fig. 6b); at least 3 gill rakers present; first dorsal fin with 8 – 22 spines</span> <span class="number"><em>Scomberomorus</em> (Spanish mackerel)</span></li>      </ol>    </li>    <li>      <ol class="list">        <li class="list-item"><span class="text">2 lateral lines (Fig. 4)</span> <span class="number"><em>Grammatorcynus bilineatus</em> (doublelined mackerel)</span></li>        <li class="list-item"><span class="text">A single (upper) lateral line</span> <span class="number">3</span></li>      </ol>    </li>  </ol></div>

Dot leaders with text that may wrap

With this HTML:

<div class="leader">
  <span>Peter Piper picked a peck of pickled peppers. A peck of pickled peppers Peter Piper picked. If Peter Piper picked a peck of pickled peppers, Where's the peck of pickled peppers Peter Piper picked?</span>
  <span>The peck of pickled peppers Peter Piper picked is gone.</span>
</div>
<div class="leader">
  <span>Really?</span>
  <span>Really.</span>
</div>

and this CSS:

.leader {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.leader > span {
  background-color: white;
}
.leader > span:first-child:after, .leader > span:last-child:before {
  position: absolute;
  background-color: white;
  z-index: -1;
  content: "................................................................"
    "................................................................"
    "................................................................"
    "................................................................"
    "................................................................"
    "................................................................"
    "................................................................"
    "................................................................";
  letter-spacing: 0.25em;
  cursor: default;
}
.leader > span:last-child {
  float: right;
  background-color: white;
  text-align: right;
}
.leader > span:last-child:before {
  left: 0;
}

You should have good results.
You can play around with it on CodePen if you like.

Dot leaders with picture background

It's easy to do with some simple javascript and css, here's a fiddle: jsfiddle

The key is to set the width of the div that holds the dots to the width of the column minus the width of the food name minus the width of the price, and to make sure there are more than enough dots to cover the distance, and to set overflow: hidden for the dot div.

$(".menu-row").each(function(index, element) {
    var menuRowWidth = $(element).width();
    var foodItemWidth = $(element).children('.food-item').width();
    var priceWidth = $(element).children('.price').width();
    var $dotFiller = $(element).children('.dot-filler');
    var dotFillerWidth = menuRowWidth - foodItemWidth - priceWidth;
    $dotFiller.width(dotFillerWidth + "px"); 
});

Then float the item and dot div left, the price right, all within a set width column. It's also important that overflow: hidden is set for the dots, because when we set the width of that div in javascript we want all extra dots to just be cut off. The CSS:

.food-item {
  float: left
}

.dot-filler {
  overflow: hidden;
  width: 0;
  float: left;
}

.price {
  float: right;
}

.menu-row {
  width: 400px;
}

Then structure your html as follows:

<div class="menu-row">
  <div class="food-item">Steak</div>
  <div class="dot-filler">............................................................................................</div>
  <div class="price">$18.00</div>
</div>

<div class="menu-row">
  <div class="food-item">Hamburger</div>
  <div class="dot-filler">............................................................................................</div>
  <div class="price">$8.00</div>
</div>

Creating leading and following dots in CSS

Use \b7 instead it is the code for the middot

.read-more{
    display: inline-block;
}

.read-more span:before{
    content: '\b7\b7\b7';
    width: 20px;
}
.read-more span:after{
   content: '\b7\b7\b7\b7\b7\b7\b7\b7\b7\b7\b7';
   width: 60px;
}

Leader dots separating columns in an HTML table

Try the following in your CSS:

TABLE TD DIV SPAN { background-color: white; }

That should eliminate the overlap.

Then I would remove the

#maintable td div
{
    margin-right: 1ex;
}
#maintable td+td div {
    margin-left: 1ex;
}

To remove the gaps. From there, it will likely be a series of minor tweaks to get the exact spacing (perhaps add some padding to the SPAN to avoid the dots from "touching".

Related Topics