Many people wonder how to create a dotted line effect that automatically adjusts its length based on the content around it.


Click to enlarge

  1. The HTML:

    <div class="food_menu">
        <div class="product">
            <div class="dotted"></div>
            <div class="item">Chocolate Moose Cake</div>
            <div class="price">$7.99</div>
        </div>
        <div class="product">
            <div class="dotted"></div>
            <div class="item">Molten Chocolate Brownie With Blue Bell® Ice Cream</div>
            <div class="price">$11.99</div>
        </div>
        <div class="product">
            <div class="dotted"></div>
            <div class="item">Apple Pie</div>
            <div class="price">$5.99</div>
        </div>
    </div>      
    
  2. The CSS:

    .food_menu{
            float: left;
    	width: 560px;
    	background: #F4F4F4;
    	padding: 20px;
    }
    .product{
    	clear: both;
    	float: left;
    	width: 100%;
    	position: relative;
    }
    .dotted{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
    	height: 16px;
            border-bottom: 1px dotted #AAA;
    	z-index: 1;
    }
    .item{
    	display: block;
    	float: left;
    	width: auto;
    	height: 20px;
    	position: relative;
    	background: #F4F4F4;
    	padding-right: 10px;
    	z-index: 2;
    }
    .price{
    	display: block;
    	float: right;
    	width: auto;
    	height: 20px;
    	text-align: right;
    	background: #F4F4F4;
    	z-index: 2;
    	position: relative;
    	padding-left: 10px;
    }
    
  3. The result:
Chocolate Moose Cake
$7.99

Molten Chocolate Brownie With Blue Bell® Ice Cream
$11.99

Apple Pie
$5.99

Easy as pie! ‐ See what I did there?