Skip to main content
1 de 3
May
  • 583
  • 8
  • 27

¿Cómo crear dos bordes que separe el texto principal?

Estoy tratando de crear dos bordes una a la izquierda y otra a la derecha y el texto principal quede en el medio.

Un ejemplo a la idea a lo que estoy tratando de lograr he subido dos imágenes de muestra.

Trate 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>

Intente 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. introducir la descripción de la imagen aquí

Y al hacer responsive se adapte de está manera. introducir la descripción de la imagen aquí

May
  • 583
  • 8
  • 27