CSS technique for a horizontal line with words in the middle
This is roughly how I'd do it: the line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background.
h2 {
width: 100%;
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
padding:0 10px;
}<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>I tested in Chrome only, but there's no reason it shouldn't work in other browsers.
JSFiddle: http://jsfiddle.net/7jGHS/
After trying different solutions, I have come with one valid for different text widths, any possible background and without adding extra markup.
h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
}<h1>Heading</h1>
<h1>This is a longer heading</h1>I tested it in IE8, IE9, Firefox and Chrome. You can check it here http://jsfiddle.net/Puigcerber/vLwDf/1/
Here is Flex based solution.
h1 {
display: flex;
flex-direction: row;
}
h1:before, h1:after{
content: "";
flex: 1 1;
border-bottom: 1px solid;
margin: auto;
}
h1:before {
margin-right: 10px
}
h1:after {
margin-left: 10px
}<h1>Today</h1>JSFiddle: https://jsfiddle.net/j0y7uaqL/