CENTERED HEADING OVERLAYING A HORIZONTAL LINE WITH CSS

Besides allowing any kind of background, my solution doesn’t add any extra HTML tag and scales with every size of text.

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%;

}

Leave a comment