Untitled

dabblet.css

.vermelho {
	width: 100px;
	height: 100px;
	background-color: #ccc;
}
.amarelo {
	width: 100px;
	height: 100px;
	background-color: #ccf;
}

.marcador {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #000;
position: relative;
left: -10px;
top: 20px;
}

.oi {
	border-left: 2px solid #0000ff;
	width: 100px;
	height: 100px;
	margin-top: 20px;
	position: absolute;
}

.ola {
	border-left: 2px solid #00ffff;
	width: 100px;
	height: 100px;
	margin-top: 20px;
	position: absolute;
}

.oie {
	border-left: 2px solid #ff00ff;
	width: 100px;
	height: 100px;
	margin-top: 20px;
	position: absolute;
}

dabblet.html

<div class="oi"></div>
<section class="vermelho"><div class="marcador"></div></section>
<div class="ola"></div>
<section class="amarelo"><div class="marcador"></div></section>
<div class="oie"></div>
<section class="vermelho"><div class="marcador"></div></section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}