dziudek/dabblet.css

## dabblet.css
/**
 * Layout with the two lines at both sides without using additional elements (only :after and :before)
 */

div {
	background: #fff;
	width:100%;
	height:30px;
	text-align: center;
	position: relative;
}

div:before,
div:after {
	background:#0a0;
	content: "";
	height:30px;
	width:30%;
	right:0;
	position: absolute;
	z-index: 1;
}

div:before{
	left:0;
	right:auto;
}

div > ul {
	display:inline-block;
	position: relative;
	z-index:2;
}

div > ul li {
	float:left;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div>
	<ul>
		<li>Lorem ipsum dolor sit amet dolor loles x</li>
		<li>Lorem ipsum dolor sit amet dolor loles x</li>
		<li>Lorem ipsum dolor sit amet dolores loles x</li>
	</ul>
</div>

## settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Layout with the two lines at both sides without using additional elements (only :after and :before)
	*/

	div {
	background: #fff;
	width:100%;
	height:30px;
	text-align: center;
	position: relative;
	}

	div:before,
	div:after {
	background:#0a0;
	content: "";
	height:30px;
	width:30%;
	right:0;
	position: absolute;
	z-index: 1;
	}

	div:before{
	left:0;
	right:auto;
	}

	div > ul {
	display:inline-block;
	position: relative;
	z-index:2;
	}

	div > ul li {
	float:left;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div>
	<ul>
	<li>Lorem ipsum dolor sit amet dolor loles x</li>
	<li>Lorem ipsum dolor sit amet dolor loles x</li>
	<li>Lorem ipsum dolor sit amet dolores loles x</li>
	</ul>
	</div>