Horizontal line in the middle of text
css, html
Solution
you can used to css `:after`
as like this
HTML
<h2><span class="line-center">Test</span></h2>
Css
.line-center{
margin:0;padding:0 10px;
background:#fff;
display:inline-block;
}
h2{
text-align:center;
position:relative;
z-index:2;
}
h2:after{
content:"";
position:absolute;
top:50%;
left:0;
right:0;
border-top:solid 1px red;
z-index:-1;
}
LIve Demo
Problem
I want to display a horizontal line with words in the middle so that it looks like following: I'm trying this and doesn't work: HTML: ``` <h2><span>Test</span></h2> ``` CSS: ``` h2{ font-size: 100px; border-top: solid 1px black; width: 100%; height: 50px; margin-top: 25px; top: 50%; z-index: 1; } span{ background: #fff; padding: 0 20px; margin-top:-25px; display: inline-block; z-index: 5; } ``` JSFiddle: http://jsfiddle.net/2ds9a/