iMasters | Por uma internet mais criativa e dinâmica

Você poderá posicionar o caracter a esquerda, a direita ou nos dois lados do link. Observe o código a seguir:

¤ Meu link 1

E abaixo o resultado no browser:

Revisão dos conceitos

Vimos até aqui que através da codificação de caracteres, podemos inserir pequenas imagens e símbolos nos nossos documentos HTML.

A inserção é feita no fluxo normal do texto como se fora uma letra e desta forma o caracter poderá ser posicionado no início, no final, em ambos e até mesmo dentro de um texto.
Existem disponíveis na Internet as tabelas que fornecem a codificação dos caracteres para você escolher aquele que irá usar.

Vamos nos aproveitar desta facilidade para personalizar links usando as CSS, mas é óbvio que você poderá se valer dos caracteres para outras finalidades decorativas ou não em sua página web.

Efeitos CSS nos caracteres

Vou tomar como base para este tutorial a estilização para um link com um caracter posicionado a esquerda. As técnicas para posicionamentos a direita ou em ambos os lados é a mesma.

E, a proposta de estilização é a de fazer com que o caracter fique invisível a esquerda do link e torne-se visível quando passa-se o mouse sobre o link.

1^o. Passo:

Posicionar o caracter no link. Conforme vimos acima:

º MEU LINK

Resulta no brownser:

2^o. Passo:

Sendo a proposta de estilização a de "esconder e fazer aparecer" o caracter, vamos separar o caracter do texto do link.

A tag HTML própria para esta separação é a tag . Observe agora o código:

º MEU LINK

3^o. Passo:

Em uma página web é comum a existência links com comportamentos diferentes, daí vamos atribuir uma classe para o parágrafo que contém o link. E precisaremos de mais uma classe para cada um dos que criamos. Estas três classes possibilitarão estilizar nosso link.

Criei as classes: .geral .caracter .linque. E o novo código com as classes:

class="geral" >class="caracter" >º class="linque" >MEU LINK

4^o. Passo:

Escrever as regras CSS para "esconder" o caracter quando o link estiver no estado UP (em repouso) e fazê-lo "aparecer" quando o link estiver no estado OVER (com o mouse em cima). O seletor de contexto para o caracter é: .geral a span.caracter. Não sabe o que é seletor contexto? Ver neste link.

A propriedade CSS para isto é visibility e a regra para esconder é:
.geral a span.caracter {visibility:hidden;}

E, para aparecer é:
.geral a:hover span.caracter {visibility:visible;}

O efeito destas duas regras é mostrado abaixo:

Link no estado UP ==>

Link no estado OVER ==> 

Você pode observar que já conseguimos o efeito "rollover" na bolinha ao lado esquerdo do link (o caracter º), mas podemos incrementar este efeito retirando o sublinhado da bolinha!

Retirar o sublinhado do caracter:

A propriedade CSS que retira o sublinhado é: text-decoration. Você seria capaz de escrever a regra CSS para retirar o sublinhado somente do caracter?

Se você respondeu o código abaixo, raciocinou corretamente:

.geral a:hover span.caracter {text-decoration:none;}

Mas escapou-lhe um detalhe e a regra não fará o efeito que você espera. O sublinhado em links é uma característica "default" do brownser e válida para todo o texto do link. Você não conseguirá retirar parte do sublinhado do texto do link (o caracter), usando uma regra para .

Temos que usar um artifício que consiste em retirar o sublinhado de todo o link para depois colocar o sublinhado só no texto e não no caracter. Assim:

.geral a {text-decoration:none;} /* retira o sublinhado de todo o link texto mais caracter */
.geral a span.linque {text-decoration:underline;} /* coloca o sublinhado no texto do link */

Bug no Internet Explorer

As regras CSS como descritas acima fazem o efeito proposto no tutorial em brownsers Netscape, Opera, Firefox, Mozilla, mas o Internet Explorer apresenta um bug que consiste em não mostrar o caracter no estado OVER.

Uma das maneiras contornar este bug é declarar uma regra adicional:

.geral a:hover {margin: 0;} /* hack para IE */

Considerações e dicas finais

O entendimento da técnica básica mostrada neste tutorial possibilitará a você criar uma variedade cosiderável de efeitos em links. A manipulação dos caracteres quanto ao seu aspecto e posicionamento, conjugada com efeitos adicionais como cores, fundos, e sublinhados somada a sua criatividade, proporcionará mais uma ferramenta CSS para a personalização de seus links.

Alguns exemplos

Criei uma página com alguns efeitos usando os conhecimentos deste artigo. Fique a vontade para copiar e colar o código fonte da página no seu HD e estudar offline.

Ver a página com exemplos

Descruba a versatilidade das CSS
Projete conforme as Web Standards.

Um abraço e até a próxima.