Traçar linha ligando divs

[CrazyLOL 2]

Galera, to querendo algo simples mas nao estou conseguindo fazer.. kkk

Eu tenho este resultado aqui, imagem:

https://www.dropbox.com/s/0e7vkuae87ferfz/Captura%20de%20tela%202016-01-08%2013.25.51.png?dl=0

 

E gostaria de fazer uma linha que ligasse o primeiro icone, o segundo e o terceiro.. uma linha que fosse no meio deles como se estivesse seguindo uma etapa...

 

O meu html ate o momento esta assim:

<div class="content-block" align="center" style="background-color: #F7F7F7; margin-top: 12px;">
        <p class="font-bebas size-18">
        Preparando
        </p>
        <div class="row">
          <div class="col-33" align="center">

            <span class="fa-stack fa-lg size-32">
              <i class="fa fa-circle  fa-stack-2x gray"></i>
              <i class="fa fa-cutlery fa-stack-1x fa-inverse"></i>
            </span>

            
          </div>
          <div class="col-33" align="center">
            <span class="fa-stack fa-lg size-32">
              <i class="fa fa-circle fa-stack-2x green"></i>
              <i class="fa fa-rocket fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <div class="col-33" align="center">
            <span class="fa-stack fa-lg size-32">
              <i class="fa fa-circle fa-stack-2x gray"></i>
              <i class="fa fa-check fa-stack-1x fa-inverse"></i>
            </span>
          </div>
        </div>

      </div>

Se alguem puder dar um apoio moral agradeço!!!

 

:D

[carloshenrique1991 0]

Tente usar um <hr/> e com css:

 

hr{
  border:0px; border-bottom:1px solid #b7b7b7;
  width:268px; height:auto;
  margin:0px auto 0px auto;
  padding:0px;
  z-index:800;}

e nas divs das figuras use um z-index:999;