CSS: menu com descrição

Não faz muito que comecei a usar a propriedade content do CSS, apesar de não ser nova (é CSS2 ainda). E percebi que ela é a solução pra muitas coisas.

Um tempinho atrás eu estava procurando uma maneira de fazer um menu horizontal com descrição abaixo. Mas queria de uma maneira mais ou menos dinâmica, sem ter que colocar algum parágrafo ou span manualmente com o conteúdo da descrição.
Como era para um projeto de Drupal, me foquei em buscas relacionadas a ele, sem procurar diretamente por CSS.

Agora, depois de brincar há um tempinho com a propriedade content, descobri uma maneira bem simples de fazer o que eu pretendia.
Com um pouco de ajuda, cheguei a isto:

Código HTML:

[sourcecode language=”html”]<ul class="menu">
<li><a href="#" title="Saiba mais sobre mim">Sobre</a></li>
<li><a href="#" title="Conheça meu trabalho">Portfolio</a></li>
<li><a href="#" title="Entre em contato">Contato</a></li>
</ul>[/sourcecode]

CSS básico:

[sourcecode language=”css”]ul.menu li {
display:inline-block;
float:left;
height:auto;
width:250px;
text-align:center;
padding:5px;
}
ul.menu li a:after {
content: "a " attr(title);
white-space: pre;
font-size:11px;
line-height:11px;
}
[/sourcecode]

Primeiro, é definido no li:

  • display: inline-block para que os itens fiquem um do lado do outro;
  • float:left para retirar os espaços que ficam por padrão entre os itens de lista.

Depois, é necessário definir um pseudo-seletor :after para o link do item de lista e, nele, definir:

  • a propriedade content para exibir uma quebra de linha (“a “) e o atributo title do link — o que facilita o uso desse código em CMS, pois eles costumam permitir a inserção manual do title do menu;
  • o white-space para que a quebra de linha seja respeitada.

Feito isso, mais uns ajustes para melhorar a aparência, o resultado é este:

Exemplo de menu com exibição de descrição a partir do title
Exemplo de menu com exibição de descrição a partir do title

Disponibilizei uma demo, onde é possível visualizar o código na íntegra.

Deixe uma resposta