Return to Snippet

Revision: 65809
at January 22, 2014 03:09 by bitsculptor


Initial Code
// 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);
});

Initial URL


Initial Description
This is a combination of html, css, and jQuery to create a neat little effect that gives a full width headline where the text is surrounded by 1px bars that fill the white space.

Initial Title
Full Width Headline with simple bars to fill the white space

Initial Tags


Initial Language
jQuery