Centered heading with fading rules

dabblet.css

/* Centered heading with rules */
h1 {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
	text-overflow: ellipsis;

	font: 1.6em/1.1 Georgia;
	padding: .2em 0;
	}
h1:before,
h1:after {
	content: "";
	position: relative;
	display: inline-block;
	width: 50%;
	height: 1px;
	
	vertical-align: middle;
	
	
background: linear-gradient(0deg, 
rgba(0,0,0,0) 0, rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);

	

	}
h1:before {    
	left: -.5em;
	margin: 0 0 0 -50%;
	}
h1:after {    
	left: .5em;
	margin: 0 -50% 0 0;

background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);


	}
h1>span {
	display: inline-block;
	vertical-align: middle;
	white-space: normal;
	}

/* Works on any background */
html {
	background: #f06;
	background: linear-gradient(45deg, #f39, yellow);
	min-height:100%;
	font: 1.3em/1.5 Georgia;
	}

dabblet.html

<h1>Hello!</h1>

<p>Here are the centered headings with horizontal lines.</p>

<p>They are one-lined by default, but if it needs to be multiline, then you can add an extra span.</p>

<h1><span>Multiline heading<br/>with an extra wrapping span</span></h1>

<h1>Some long, long heading without a wrapping span, so it would be overflown. Some long, long heading without a wrapping span, so it would be overflown. Some long, long heading without a wrapping span, so it would be overflown.</h1>

<p>↑ Here you can see one-lined heading, with text-overflow: ellipsis. Since it's too long, the horizontal lines cannot be seen.</p>

<footer><a href="http://dabblet.com/gist/1560674">Edit this dabblet</a></footer>

settings.json

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