how to place a heading text with horizontal lines in left & right side in CSS

Question

I wanted a design like this ; enter image description here

I wrote my css like this :

text here

.my-title:before,
.my-title:after {
    background-color: #CCCCCC;
    content: "";
    display: inline-block;
    height: 2px;
    position: relative;
    vertical-align: middle;
    width: 32%;
    margin-left: -2%;
}
}

This seems correct in local, but becasue of the final } brace it was giving error in production. How to do it with simpler CSS, so that i can get the desired design !

possible duplicate of [css technique for a horizontal line with words in the middle](http://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle) **and** http://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-hr-like-line, **and** http://stackoverflow.com/questions/16009654/horizontal-line-in-the-middle-of-text, **and**... — j08691, Mar 14 '14 at 14:16
there are 2 braces at the end, just remove one of them. Even though there are 2 CSS selectors, they are in a group, so use just one ending brace — ekhaled, Mar 14 '14 at 14:39

score 0 · Answer 1 · answered Mar 14 '14 at 14:24

DEMO

HTML

<div class="maintext">
<div class="subtext">
 <h2>Text Here</h2>
</div>
</div>

CSS

.maintext{
    width:100%;
    height:1px;
    border-top:2px solid #6b6a6a;
    position:relative;
    margin-bottom:30px;
    }
.subtext{
    width:auto;
    height:auto;
    text-align:center;
    position:absolute;
    top:-15px;
    right:0;
    left:0;
    }
.subtext h2{
    padding:7px 12px;
    background:#ffffff;
    display:inline;
    color:#000000;
    font-family: 'Georgia';
    font-size:30px;
    }

score 0 · Answer 2 · answered Mar 14 '14 at 14:27

Change your code to this

Add position:relative to .my-title

.my-title:before{
    background-color: #CCCCCC;
    content: "";
    display: block;
    height: 2px;
    width: 100px;
    position: absolute;
    top:50%;
    right:100%;
    marging:-1px 0 0;
}

.my-title:after{
    background-color: #CCCCCC;
    content: "";
    display: block;
    height: 2px;
    width: 100px;
    position: absolute;
    top:50%;
    left:100%;
    marging:-1px 0 0;
}

how to place a heading text with horizontal lines in left & right side in CSS

2 Answers2