CSS Dot Leaders With Textured Background

dabblet.css

/**
 * CSS Dot Leaders With Textured Background
 */
html {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	font: 20px/1.4 Helvetica, Arial sans-serif
}

dl {
	overflow: hidden;
}
dt {
	float: left;
	padding: 0 .4em 0 0;
	margin: 0;
}
dd {
	float: right;
	padding: 0 0 0 .4em;
	margin: 0;
}
/* That's the leader! */
dl:after {
	content: "";
	display: block;
	overflow: hidden;
	height: 1em;
	border-bottom: 1px dotted;
}

dabblet.html

<dl>
    <dt>Salmon Ravioli</dt>
    <dd>7.95</dd>
</dl>
<dl>
    <dt>Fried Calamari</dt>
    <dd>8.95</dd>
</dl>
<dl>
    <dt>Almond Prawn Cocktail</dt>
    <dd>712.95</dd>
</dl>
<dl>
    <dt>Bruschetta</dt>
    <dd>5.25</dd>
</dl>
<dl>
    <dt>Margherita Pizza </dt>
    <dd>0.95</dd>
</dl>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

I created an account here just so that I could say thank you for this - you have without knowing saved my ass from 10,000 hours worth of "how do I do that" head banging...

Thank you very much!!

+1. Looked at another 3 different solutions before finding this and it's by far the best one!

Great job, althought it won-t work on a line that needs wrapping

@alexvkcr here is a bit more modern version that works with multiline items :) https://codepen.io/kizu/pen/xxxbyBm