codescribblr
2/13/2014 - 9:41 PM

Full Width Headline with simple bars to fill the white space

Full Width Headline with simple bars to fill the white space

// HTML
<p class="introline"><span class="titleline start"></span><span class="headline">Conferences</span><span class="titleline fin"></span></p>


// CSS
.introline {
	text-transform:uppercase;
	color: #a3a3a3;
	letter-spacing: .5px;
	font-size: 14px;
	text-align:center;
	width:100%;
	position:relative;
	margin:0;
	padding:20px 0;
}
.titleline {
	border-bottom:1px solid #ddd;
	position:absolute;
	width:30%;
	height:1px;
	top:50%;
	display:block;
}
.titleline.start {
	left:0;
}
.titleline.fin {
	right:0;
}

// jQuery
$("p.introline").each(function(){
    headline_width = $(this).find(".headline").width();
    container_width = $(this).width();
    headline_padding = 20;
    $(this).find(".titleline").width(((container_width-headline_width)/2)-headline_padding);
});