Responsive dotted separator

This is a pretty cool trick. We will use CSS and HTML to create responsive dotted separators. But first this is what we want to accomplish:

List Item1 ………………………… item property1
List Item2 ………………………… item property2
List Item3 ………………………… item property3

The challenge is somehow to have a way to add a dotted line between List Item Element and the Item Property that is responsive. A first thought would be to have a JavaScript function that would add the dots dynamically by detecting the space between the List Item Element and the Item Property, and add a string (“…..”) of the proper size.

This JS based solution is actually possible, but it seems like a lot of effort and overhead to achieve such a simple effect. Luckily there is a better way to do it using HTML and CSS.

HTML
All we need is a p tag with two span tags. The rest is all CSS magic.

<p class="listItem clearfix">
<span class="item">PS3</span>
<span class="price">$100</span>
</p>

CSS

So, our first step is to move the List Item Element and the Item Property to the sides using the float property. After this we need to clear our floats so the parent tag (in this case our p tag) does not collapse its height. To achieve this we are using a common hack that is explained in detail in the article “All About Floats” by Chris Coyier

.item {
  float: left;
}

.price {
  float: right;
}

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

Now we use a bit of trickster css. Let’s add a dotted bottom border on our p tag.

.listItem {
  border-bottom: black dotted 1px;
}

As you can see we have added the dotted line but it is not quite what we need. We have to get rid of the dotted line segment right below the List Item Property and the Item Property … or do we?…

Actually what we have to do is to give our span tags a background colour that matches the overall background and then move the border behind it using negative margins. Finally we add padding to the span tags to create a bit of space between the border and that span tags.

body {
  background: rgb(243, 245, 246);
}

.listItem {
  border-bottom: black dotted 1px;
}

p span {
  margin-bottom: -1px;
  background: rgb(243, 245, 246);
  padding: 0 5px;
}

.item {
  float: left;
}

.price {
  float: right;
}

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

And that is it!… Thanks to the browser’s default rendering of the border property we have a fully functional responsive dotted separator. Hope you like this tutorial.

Share on Facebook5Tweet about this on TwitterShare on LinkedIn9

Leave a Comment

Your email address will not be published. Required fields are marked *