test for floating colour bg blocks in header

dabblet.css

/* test for floating colour bg blocks in header */
body {
	background-color: #fefefe;
}
div {
	background-color: lightgrey;
	border: 1px dashed silver;
	margin: 50px auto;
	text-align: center;
	width: 50%;
}
h1 {
	display: inline-block;
}
h1 span {
	position: relative;
}
h1 .line span {
	background-color: white;
	display: inline-block;
	padding: 4px 8px;
	z-index: 2;
}
h1 .line {
	display: inline-block;
	float: left;
	clear: both;
}
h1 span.second-line {
	margin-left: 8rem;
	top: -4px;
	z-index: 1;
}
h1 .second-line:after,
h1 .second-line:before {
	background-color: yellow;
	content: "";
	position: absolute;
}
h1 .second-line:before {
	height: 8px;
	left: -130px;
	bottom: -10px;
	width: 120px;
}
h1 .second-line:after {
	height: 30px;
	right: -30px;
	top: -10px;
	width: 80px;
}

dabblet.html

<div><h1><span class="line first-line"><span>Test for strange</span></span><span class="line second-line"><span>colour bg boxes</span></span></h1></div>

dabblet.js

var addCount =  document.querySelectorAll("[data-content-length]") ;
for (var i=0,el; i<addCount.length; i++){
	el = addCount[i];	
	el.setAttribute("data-content-length", el.innerHTML.length);
}

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}