Os caracteres especiais como um separador de menu com CSS

Postado em junho 30, 2010 por LaszloSem comentários

Eu gosto de criar horizonatal separador de menu com CSS só, sem imagem. Eu uso este método, principalmente nos menus de cabeçalho ou rodapé. No entanto, este caminho era limitada, porque eu só sabia que a borda da esquerda ou direita propriedades CSS (g. border-left:1px solid # ccc ou borda direita:1px solid # ccc) e estas propriedades locais apenas um ” | ” separador nos menus. Não é muito criativo.

Mas – tatatataLaughing – Eu encontrei um novo (para mim) Propriedade CSS “conteúdo” e um novo (para mim) seletor de classe “Se:depois”, para que eu possa colocar os caracteres especiais na minha menus como um separador de menu agora.

Exemplo:

li:after {content:" | "}

menu do meu site no rodapé foi criado pelos seguintes parâmetros:

# Se footermenu:after {content:" > "} # Footermenu li.item81: after {content:" "}

O primeiro “conteúdo” local de uma propriedade “>” personagem depois de todos os itens de menu no menu de rodapé, o segundo “conteúdo” suprime a propriedade “>” personagem do passado (item81 item de menu).

Eu testei no Firefox 3, IE 8, Google Chrome 2.0 e Opera 9.63, ele funciona bem em todos os navegador mencionado.

Ver o meu menu no rodapé.

Tags: , ,

Related Posts

Não há posts relacionados.

Deixe uma resposta

Comentários adicionais powered by BackType


Visitor Map

Leitores recentes