How to create a box with lines on both sides with CSS only

Question

I’m looking for a help from where to start to be able to create a fully css structure as in the image below.

I know this may seem very simple, but I can’t get you started.

Answer 1

It’s actually not 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 an inside box with the name of the month:

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

The container has minimal CSS, only to allow us to accurately position what we have inside it:

.divisor {
    position: relative;
}

The box CSS with the month name defines a centralized box, gray, with thick white border. The edge is a trick to cover part of the line that we’ll 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, so as not to pollute our HTML. It is a pseudo-element, which in this case we will generate with the selector :before, which will create a new "ghost" element inside the container, before the box with the month name:

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

Answer 2

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

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

First let’s do the line (ignore the text). As in the image, I put the height to 1px and width around 90%. For the text to be centered vertically, I set the line-height for 1px (line height). Then I put a margin for the line to be centered and give a space up, finally I set the text-align for 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 doesn’t get pasted. You’ll notice that the background takes the whole line, that’s because the div .content does not have a defined width. This is solved by setting display:inline;. And finally, I added a white border to simulate the breaking of the lines.

Any questions ask, we are here to help. Full 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>

Answer 3

I made an example in a different way from @bfavaretto (which in the end is pretty much 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