Skip to content

Instantly share code, notes, and snippets.

/DotLeader

Created February 20, 2018 17:02
Show Gist options
  • Save anonymous/e2610c706a0bbb35e3686d6ec7d76e86 to your computer and use it in GitHub Desktop.
Save anonymous/e2610c706a0bbb35e3686d6ec7d76e86 to your computer and use it in GitHub Desktop.
Download ZIP
Simple CSS Dot Leaders
Raw
DotLeader
<!DOCTYPE html>
<html>
<head>
<!-- Feel free to use and modify however you like http://AlanSimpson.me -->
<title>CSS Dot Leaders</title>
<style>
ul.dotleaders {
list-style: none;
padding: 0;
/* This width can be whatever you like */
width: 640px;
/* Keeps extra dots from appearaing past last character */
overflow-x: hidden;
}
ul.dotleaders li:before {
float: left;
/* Keeps dots on same line as text */
width: 0;
/* Prevents word wrap */
white-space: nowrap;
/* Just a lot of dots with a space in between, no specific number */
content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}
ul.dotleaders li span:first-child {
padding-right: 0.33em;
/* Helps to cover dots under the words */
background-color: white;
}
ul.dotleaders li span + span {
float: right;
padding-left: 0.33em;
/* Helps to cover dots under the price */
background-color: white;
}
</style>
</head>
<body>
<ul class="dotleaders">
<li><span>Beef Tostada</span><span>$3.95</span></li>
<li><span>Super Nachos</span><span>$4.98</span></li>
<li><span>Quesadilla</span><span>$2.49</span></li>
<li><span>Chimichanga</span><span>$5.49</span></li>
<li><span>Everything Dinner</span><span>$12.49</span></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment