Título com linha horizontal centralizada

Não sei bem se existe um termo técnico para o que vou demostrar aos leitores do Escola PHP hoje. Mas dei um nome para ele “Título com linha horizontal centralizada”. Por vezes o designer acha por bem incluir algo parecido com o que vimos no exmplo ao lado em suas artes, e acaba que o webmaster não sabe muito bem como fazer o que o designer pensou virar realidade!

Às vezes escolhia tirar simplesmente esse tipo de título do site ou mesmo o fazia com ajuda de imagens, mas convenhamos que deve haver algum jeito melhor de se resolver este problema! Eu aprendi e quero compartilhar como fazer aos leitores do EscolaPHP. Vamos ao código e depois a explicação.

Mão na massa

{code type=css}
h1:before {
content: “”;
display: block;
border-top: solid 1px black;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: 1;
}

h1 span {
background: #fff;
padding: 0 20px;
position: relative;
z-index: 5;
}
{/code}

Calma, eu explico

A solução baseia-se em incluir um elemento <span> dentro do H1 que de fato irá conter o texto e incluir uma borda no topo do Elemento H1 para dar a impressão de que ela está no meio do elemento H1. Com o uso do :before incluirmos um estilo “antes” do H1.

Tem alguma dúvida? Conhece uma maneira de fazer melhor? Não deixe de comentar e compartilhar o conhecimento!

Receba as melhores dicas para criar um negócio digital lucrativo

Jair Rebello

Empreendedor e Nômade Digital. Dedica grande parte do seu tempo para criar soluções como o Plugin SqueezeWP e o Template ConversionWP Premium que ajudam dezenas de milhares de empreendedores a desenvolverem seus negócios.

Website: http://www.rebello.blog.br