Estoy tratando de crear dos bordes una a la izquierda y otra a la derecha y el texto principal quede en el medio de los dos bordes.
Un ejemplo a la idea a lo que estoy tratando de lograr he subido dos imágenes de muestra.
Traté realizando de esta manera pero las dos lineas se juntan.
<div class="www">
<h4><span class="lineseparator"></span>
TITLE NOT TITLE
<span class="lineseparator"></span>
</h4>
<p>Content and content and contecnt</p>
</div>
Intenté de esta otra forma pero el mismo problema.
<div class="www">
<span class="lineseparator"></span>
<h4>TITLE NOT TITLE</h4>
<span class="lineseparator"></span>
<p>Content and content and contecnt</p>
</div>
Ejecución:
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 13px;
font-family: 'OpenSans', 'cursive', 'Releway', Roboto, Lato, Utsaah;
background-color: #FBFBFB;
}
.www {
position: relative;
padding-top: 35px;
}
.lineseparator {
height: 1px;
border-top: 1px solid #000;
display: block;
position: relative;
top: 12px;
width: 20%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 300;
}
p {
font-size: 15px;
line-height: 24px;
font-weight: 300;
}
<div class="www">
<span class="lineseparator"></span>
<h4>TITLE NOT TITLE</h4>
<span class="lineseparator"></span>
<p>Content and content and contecnt</p>
</div>
<br><br><br>
<div class="www">
<h4><span class="lineseparator"></span>
TITLE NOT TITLE
<span class="lineseparator"></span>
</h4>
<p>Content and content and contecnt</p>
</div>
Lo que deseo lograr es lo siguiente el ejemplo lo tome de un sitio web.