CODEWITHSUNDEEP
htmlcss
Valborg
Valborg

Reputation: 105

How do I fill the space between items with dots?

I'm trying to have the space between the item and the price automatically fill with "..."

/* css missing */
<ol>
  <li><span class="item">Toast</span><span class="price">$1.55</span></li>
  <li><span class="item">Eggs</span><span class="price">$2.12</span></li>
  <li><span class="item">Bacon</span><span class="price">$3.25</span></li>
  <li><span class="item">Short stack</span><span class="price">$4.00</span></li>
</ol>

I already have css separating the elements via float, but I'm not sure how I would add the dots in between. Any ideas here? I was thinking maybe a border-bottom, but don't know how to make it only between the item and the price.

Upvotes: 1

Views: 2679

Answers (5)

GuCier
GuCier

Reputation: 7425

A very simple solution is to use a dotted border with some flex magic.

li {
  display: flex;
}

span{
  display: flex;
  flex: 1;
  align-items: center;
}

span:before {
  content: '';
  border-bottom: 2px dotted #AAA;
  flex:1;
  margin: 0 10px;
}
<ol>
  <li>Toast <span>$1.55</span></li>
  <li>Eggs <span>$2.12</span></li>
  <li>Bacon <span>$3.25</span></li>
  <li>Short stack <span>$4.00</span></li>
</ol>

Upvotes: 2

kthornbloom
kthornbloom

Reputation: 3730

In case you want to stay classy and keep the prices lined up! Flexbox & some repeating linear gradients for more customization on the dotted part.

ol {
  width: 200px;
}

li {
  display: flex;
  width: 100%;
}

.price {
  flex-grow: 1;
  text-align: right;
  display: flex;
}

.price::before {
  content:'';
  background: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 2px, transparent 4px);
  height: 1px;
  flex-grow: 1;
  display: inline-block;
  margin-top: 1em;
}
<ol>
  <li><span class="item">Toast</span><span class="price">$1.55</span></li>
  <li><span class="item">Eggs</span><span class="price">$2.12</span></li>
  <li><span class="item">Bacon</span><span class="price">$3.25</span></li>
  <li><span class="item">Short stack</span><span class="price">$4.00</span></li>
</ol>

Upvotes: 5

G-Cyrillus
G-Cyrillus

Reputation: 105913

You can easily use flex for this:

li {display:flex;}
span{padding:0 0.15em;}
li::before {content:'';border-bottom:dotted;order:1;flex:1;margin-bottom:0.25em;}
li span:last-of-type{order:2;width:5em;}
<ol>
  <li><span class="item">Toast</span><span class="price">$1.55</span></li>
  <li><span class="item">Eggs</span><span class="price">$2.12</span></li>
  <li><span class="item">Bacon</span><span class="price">$3.25</span></li>
  <li><span class="item">Short stack</span><span class="price">$4.00</span></li>
</ol>

If the counter is required , a CSS counter can be added :

ol {counter-reset:lis;}
li {display:flex;}
span{padding:0 0.15em;}
li::before {counter-increment:lis;content:counter(lis)'. ';}
li::after {content:'';border-bottom:dotted;order:1;flex:1;margin-bottom:0.25em;}
li span:last-of-type{order:2;width:5em;}
<ol>
  <li><span class="item">Toast</span><span class="price">$1.55</span></li>
  <li><span class="item">Eggs</span><span class="price">$2.12</span></li>
  <li><span class="item">Bacon</span><span class="price">$3.25</span></li>
  <li><span class="item">Short stack</span><span class="price">$4.00</span></li>
</ol>

Upvotes: 0

Sean
Sean

Reputation: 975

I found this to have worked for you. Just increase the margin-right on .item and add more full stops in the content if you want more.

.item {
    position: relative;
    margin-right: 1.1rem;
}

.item::after {
    position: absolute;
    content: "...";
    left: calc(100% + 3px);
    bottom: 6px;
    width: 1rem;
    height: 1em;
}

Upvotes: 0

Jerry Ben
Jerry Ben

Reputation: 320

I think you are looking for css psaudo rule :after. Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/::after

.item:after{
   content: '...'
}
            <ol>
                <li><span class="item">Toast</span><span class="price">$1.55</span></li>
                <li><span class="item">Eggs</span><span class="price">$2.12</span></li>
                <li><span class="item">Bacon</span><span class="price">$3.25</span></li>
                <li><span class="item">Short stack</span><span class="price">$4.00</span></li>
            </ol>

Upvotes: 2

Related Questions