Alguém poderia me explicar o que cada linha dessa faz exatamente.
header .container:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
section {
margin: 2em 0;
overflow: hidden;
}Obrigado
Solucionado
Alguém poderia me explicar o que cada linha dessa faz exatamente.
header .container:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
section {
margin: 2em 0;
overflow: hidden;
}Obrigado
hoje, com a Alura e o Google Gemini
Opa! E aí, Flávio! Tudo certinho, cara? =)
Vamos lá, por partes... Rs.
A primeira linha, header .container:before, você está dizendo que quer usar o pseudo-elemento (before) da classe container, que é filha do elemento header... Repare que lê-se da direita para a esquerda! =)
Como estamos selecionando um pseudo-elemento, devemos passar a propriedade content, mesmo que vazia, caso contrário o restante desse seletor será ignorado! Feito isso, você define o display: inline-block, utilizando quando queremos que os elementos fiquem em linha, mas com algumas características de um block, como definição de largura... Nas próximas duas linhas, você diz que a altura desse elemento será de 100%, ou seja, o máximo possível e que estará centralizado verticalmente, sacou? =)
Já na segunda parte, você está buscando elementos section... Você define uma margin: 2em 0, ou seja, na parte superior e inferior, teremos um espaçamento de 2em, equivalente a duas vezes o tamanho da fonte daquele elemento, além de margem nula nas laterais (tanto esquerda, quanto direita). Por fim, o overflow: hidden esconde todo o conteúdo que possa "vazar" desse elemento. Entendeu? =)
Espero ter ajudado, mas qualquer dúvida não deixe de postar por aqui, no fórum, para que possamos ajudá-lo! =)
Abraço e bons estudos,
Fábio