A Less Mixin for creating a heading with a flexible CSS doubled line background.

gistfile1.md

Example: http://jsbin.com/iqegiw/3

• Works in IE8+

The Mixin

.headingDoubleLineBg (
	@color, // the color of the lines 
	@maskColor, // the color of the bg that should mask the lines behind the text (this should match the bg color of your page)
	@padding, // the padding to surround your text
	@lineThickness: 3px, // the thickness of the lines
	@lineSpacing: 2px, // the vertical spacing between the lines
	@childTextSel: span, // the child selector of the heading that wraps the text, defaults to span
) {

	position: relative;
	background-color: @maskColor;

	@{childTextSel} {
		position: relative;
		z-index: 1;
		display: inline;
		padding: @padding;
		background-color: @maskColor;
	}

	&:after {
		position: absolute;
		top: 50%;
		z-index: 0;
		display: block;
		width: 100%;
		height: @lineSpacing;
		margin-top: -(@lineThickness + @lineSpacing) * .5;
		border-top: @lineThickness @color solid;
		border-bottom: @lineThickness @color solid;
		content: "";
	}
}

Usage

h2 {
	color: red;
	.headingDoubleLineBg(red, white, 0 10px, 3px, 2px, span);
}

Output

h2 {
  color: red;
  position: relative;
  background-color: #ffffff;
}
h2 span {
  position: relative;
  z-index: 1;
  display: inline;
  padding: 0 10px;
  background-color: #ffffff;
}
h2:after {
  position: absolute;
  top: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  height: 2px;
  margin-top: -2.5px;
  border-top: 3px #ff0000 solid;
  border-bottom: 3px #ff0000 solid;
  content: "";
}

Required Markup

<h2><span>Short Heading</span></h2>