I would like to know how to style the titles of the site, to have a dash on each side

Question

Hello, I would like to know how to style the titles of the site, to have a dash on each side, for the feeling that is dividing the pages, in html, css and/js. Thank you

Follows Example:

Answer 1

You can use flexbox to do this by creating two pseudo-elements, ::before and ::after, to construct the lines (see explanatory comments in the code):

body{
   margin: 0;
   background: #000;
   font-size: 20px;
   color: #fff;
}

.titulo{
   display: flex;
   justify-content: center; /* centraliza o texto horizontalmente */
   align-items: center; /* centraliza as linhas verticalmente */
   margin: 30px 0; /* 30px -> margens superior e inferior */
}

.titulo::before,
.titulo::after{
   content: '';
   position: relative;
   height: 1px; /* espessura das linhas */
   background: #666; /* cor das linhas */
   min-width: 50px; /* largura mínima das linhas */
   flex-grow: 1; /* distribui a largura das linhas por igual */
}

.titulo span{
   color: #fff; /* cor do texto */
   padding: 0 15px; /* distancia do texto às linhas */
   font-weight: bold; /* negrito */
   font-size: 2em; /* tamanho do texto */
}

<div class="titulo">
   <span>Jr Luz</span>
</div>
<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>