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.
