September 2, 2014

How to create a horizontal line with words in the middle using css?

How to create a horizontal line with words in the middle using css

This is really useful. Some try to put --------- or ---------. This can be done with a css very easily.

HTML

<h2><span>THIS IS A TEST</span></h2>

CSS

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;
}
demo

No comments:

Post a Comment

Popular Posts

Views