How to create a box with two-sided lines only with CSS

In fact, it's not even that obvious. Almost everything in CSS is box based, and what you need is a box and two lines. There are several ways to achieve this, and I'll show you a path using 2 elements: a container, and a box inside with the name of the month:

<div class="divisor">
  <div class="mes">outubro</div>
</div>

The container has the least CSS, just to allow us to precisely position what we have inside it:

.divisor {
    position: relative;
}

The CSS of the box with the name of the month defines a gray, centered box with a thick white border. The border is a trick to cover part of the line that we will put behind the box, making it look like two lines, one on each side.

.divisor .mes {
    width: 100px;
    background: #cccccc; /* cinza */
    border: 10px solid #ffffff; /* borda branca em volta */
    margin: 0 auto; /* centraliza com bordas automáticas nas laterais */
    text-align: center; /* centraliza o texto */
    padding: 12px 24px; /* respiro em volta do texto */
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #666666; /* texto cinza escuro */ 
    z-index: 2; /* na frente da linha */
    position: relative; /* exigido pelo z-index */
}

The line will be an element generated by the CSS itself, not to pollute our HTML. It is a pseudo-element , which in this case we will generate with the :before selector, which will create a new "ghost" element inside the container, before the box with the name of the month:

.divisor:before {
    position: absolute; /* posição relativa ao container */
    top: 50%; /* posição vetical: bem na metade */
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid #666666;
    z-index: 1; /* atrás do box do mês */
}

Now all together and working:

.divisor {
    position: relative;
}
.divisor .mes {
    position: relative;
    width: 100px;
    background: #cccccc; /* cinza */
    border: 10px solid #ffffff; /* borda branca em volta */
    margin: 0 auto; /* centraliza com bordas automáticas nas laterais */
    text-align: center; /* centraliza o texto */
    padding: 12px 24px; /* respiro em volta do texto */
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #666666; /* texto cinza escuro */ 
    z-index: 2; /* na frente da linha */
}

.divisor:before {
    position: absolute; /* posição relativa ao container */
    top: 50%; /* posição vetical: bem na metade */
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid #666666;
    z-index: 1; /* atrás do box do mês */
}

<div class="divisor">
  <div class="mes">outubro</div>
</div>

I love these exercises, they greatly enhance creativity: P In my solution, I used two elements: the line and the content (which would be where the month is written). This way:

<div class="line_row"><div class="content">outubro</div></div>

First let's make the line (ignore the text). As in the image, I set the height to 1px and width around 90%. For the text to be centered vertically, I set line-height to 1px (line height). Then I put a margin for the line to be centered and give a space up, finally set the text-align to center for the text to be centralized.

For the text, I put the background to #ccc to match the line and a padding so the text does not stick. You will notice that the background takes up the entire line, because the .content does not have a defined width. This is resolved by setting display:inline; . And finally, I added a white border, to simulate the breaking of the lines.

Any questions, we are here to help. Complete example:

.line_row {
    margin:25px auto;
    width:90%;
    height:1px;
    background-color:#ccc;
    line-height:1px;
    text-align:center;
}

.content {
    padding:7px 15px;
    background-color:#ccc;
    display:inline;
    color:#333;
    border:10px solid #fff;
}

<div class="line_row">
  <div class="content">outubro</div>
</div>

I made an example of a different form of @bfavaretto (which in the end is almost the same result), follow my solution (I tried to explain what was done in the comments next to the CSS properties):

div.traco {
  height: 13px;  /* Altura da linha (metade a altura do div.title)*/
  border-bottom: 1px solid #DDDDDD;  /* borda de 1px cinza, para dar o efeito de traço */
  text-align: center;  /* Para centralizar de forma simples o conteúdo (div.title) ao centro */
}
div.traco > div.title {
  padding: 5px;  /* espaçameento ao redor do testo do titulo para criar o box */
  background-color: #DDDDDD;  /* cor de fundo do titulo (div.title) - cinza */
  display: inline-block;  /* para que o tamanho horizontal do titulo (div.title) seja de acordo com o tamanho de seu conteúdo */
  border-color: #ffffff;  /* cor branca da borda para dar o efeito de que o traço tem um espaçamento do titulo */
  border-style: solid;  /* stilo da borda */
  border-width: 0 10px;  /* seta os tamanhos da borda (para dar o efeito de que o traço tem um espaçamento do titulo), 0px em cima e em baixo (pois não é necessirio borda) e 10px na direita e na esquerda */
}

<div class="traco">
  <div class="title">Outubro</div>
</div>

Here an example using this Title in several sections