7

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;
}

1

3 Respostas 3

7

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.

SEM CLEARFIX:

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>

COM CLEARFIX:

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>

1
  • 1
    Essa resposta está muito boa, acredito que faltou explicar o porque do 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
    – igrossiter
    Commented 23/03/2016 às 17:39
4

Basicamente, ele irá antes e depois (before/after) acrescentar um espaço e exibirá no formato de tabela (display: table;).

2
  • Não entendi o que seria exibido como tabela.
    – user37440
    Commented 16/03/2016 às 18:15
  • Geralmente isso serve para limpar o float:left, se não me engano Commented 16/03/2016 às 19:19
2

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/)

Você deve fazer log-in para responder a esta pergunta.