CODEWITHSUNDEEP
htmlcss
Romanoti
Romanoti

Reputation: 1307

Price list dotted underline between price and product with dynamic width

I want to make a price list that have a dotted underline between price and product with dynamic width. I have coded this -

https://jsfiddle.net/romariokbn/2gm27rv6/

<ul class="how-can-i-do">
   <li>
     <span>Price</span>
     <span>15 000 Р</span>
   </li>
   <li>
      <span>Big text price</span>
      <span> 3000 Р</span>
   </li>
</ul>

but it doesn't work when I have a spaces in right text.

Upvotes: 0

Views: 518

Answers (1)

Minal Chauhan
Minal Chauhan

Reputation: 6158

Used white-space: nowrap; for ul.how-can-i-do-that-bitch li span + span

ul.how-can-i-do-that-bitch {
    padding: 0;
  width: 293px;
  margin: 0 auto;
  margin-top: 20px;
  line-height: 30px;
}

ul.how-can-i-do-that-bitch li {
    display: table;
}

ul.how-can-i-do-that-bitch li span {
   display:     table-cell;
  color: #1e1e1e;
}

ul.how-can-i-do-that-bitch li span:first-child {
  position: relative;
  font-size: 15px;
  color: #949494;
  overflow: hidden ;  
} 
ul.how-can-i-do-that-bitch li span:first-child:after{
  content:        "";
  position:       absolute;
  bottom:         0.5em;       
  margin-left:    0.5em ;      
  width:          100%;
  border-bottom:  1px dashed red ; 
}  

ul.how-can-i-do-that-bitch li span + span {
  text-align:     right;
  width:          1%   ;       /* Trick it */
  vertical-align: bottom ;     /* Keep Price text bottom-aligned */
  padding-left:   0.5em  ;
  white-space: nowrap;
}
<ul class="how-can-i-do-that-bitch">
<li>
  <span>Peice</span>
  <span>15000Р</span>
</li>
<li>
  <span>Big text price</span>
  <span> 3000Р</span>
</li>
</ul>


<ul class="how-can-i-do-that-bitch">
<li>
  <span>Price</span>
  <span>15 000 Р</span>
</li>
<li>
  <span>Big text price</span>
  <span> 3000 Р</span>
</li>
</ul>

Upvotes: 2

Related Questions