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:

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

CSS básico:

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

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:

Créditos da imagem: Photo by Markus Spiske on Unsplash.