heading with text background

dabblet.css

/**
 * heading with text background
 */

h1
{
	font: normal 2.5em/1.5 Georgia, serif;
	padding: 0 0.5em;
	background-image: linear-gradient(
		to bottom, 
		transparent 10%,
		orange 10%,
		orange 95%,
		transparent 95%
	);
	background-size: 100% 1.5em;
	overflow: hidden;
	position: relative;
}

h1::after
{
	content: "";
	position: absolute;
	background: white;
	width: 100%;
	height: 1.5em;
	margin-left: 0.5em;
}

dabblet.html

<h1>This is a very long heading which does not fit into a single line but spreads over multiple lines</h1>

dabblet.js

// alert('Hello world!');

settings.json

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