Esto olhando alguns trechos de código na internet pra um aprendizado mais profundo de CSS, e vi esse código contido em um menu e gostaria de saber qual a funcionalidade dele.
.nav:before,
.nav:after {
content: " ";
display: table;
}
Esto olhando alguns trechos de código na internet pra um aprendizado mais profundo de CSS, e vi esse código contido em um menu e gostaria de saber qual a funcionalidade dele.
.nav:before,
.nav:after {
content: " ";
display: table;
}
Essa regra irá criar um elemento especial (chamado de pseudo elemento) antes e depois de quem possuir a classe .nav
. Nesse caso em específico, parece ser um tipo de clearfix, colocando dois espaços entre o elemento e no :after
é aplicada a propriedade clear:both
.
Provavelmente porque os itens desse menu usam a propriedade float
que tem um comportamento chato de se trabalhar e pode ser visto nesse artigo da Mozilla. Essa técnica de flutuar elementos vem diminuindo, pelo menos é o que eu acompanho. Como alternativa display:inline-block
é utilizado e mais recentemente o flexbox, porém este último ainda tem suporte limitado.
nav { border: 2px solid red }
a { float: left; border: 2px solid blue }
<nav>
<a href='#'>Link</a>
<a href='#'>Link</a>
<a href='#'>Link</a>
<a href='#'>Link</a>
</nav>
nav { border: 2px solid red }
a { float: left; border: 2px solid blue }
nav::after,
nav::before {
content: ' ';
display: table
}
nav::after {
clear: both
}
<nav>
<a href='#'>Link</a>
<a href='#'>Link</a>
<a href='#'>Link</a>
<a href='#'>Link</a>
</nav>
display: table
que gera uma célula anónima e aplica formatação em bloco evitando assim que as margens do topo e do fundo se combinem em uma só (margin collapse) nicolasgallagher.com/micro-clearfix-hack
Commented
23/03/2016 às 17:39
Basicamente, ele irá antes e depois (before/after) acrescentar um espaço e exibirá no formato de tabela (display: table;).
float:left
, se não me engano
Commented
16/03/2016 às 19:19
Esse tipo de formatação do CSS é utilizado muitas vezes em icones de FrameWorks CSS já prontos, por exemplo o bootstrap.
.glyphicon-asterisk:before {
content: "\2a";
}
.glyphicon-plus:before {
content: "\2b";
}
Esse código por exemplo expõe na tela um asterisco em forma de ícone/imagem e o outro expõe um outro elemento. Quando conectado ao BootStrap (http://getbootstrap.com.br/)