Background Line on Header Text

Supplemental 182 views
0 Flares 0 Flares ×

This snippet will allow you to put a background line on either side of the header text as the following:


                               Centered Header Text                               


<h2><span>Centered Header Text</span></h2>


h2 {
    text-align: center;
    display: table;
    width: 100%;
h2 > span, h2:before, h2:after {
    display: table-cell;
h2:before, h2:after {
    background: url( repeat-x center;
    width: 50%;
    content: ' ';
h2 > span {
    white-space: nowrap;
    padding: 0 9px;

For Reference:

How can I make a fieldset legend-style “background line” on heading text?
JS Fiddle

Posted in CSS


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.


Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×