Efeitos em links (sublinhado, sobrelinha, tachado)

Existem alguns efeitos bem simples de fazer no texto, principalmente nos links como, por exemplo, colocar sublinhado, tachado ou sobrelinha (linha na parte de cima do texto) e isso dá um bom efeito visual no blog.
Uma coisa que já usei e gostei muito foi mostrar sublinhado junto com a sobrelinha quando passa o mouse sobre o link, entre na pagina editar html e coloque isso aqui:

.main a:hover{text-decoration: underline overline;}

Depois clique para salvar e veja que aparece nos links das postagens uma linha embaixo e outra em cima dos links quando coloca o mouse sobre ele, o mesmo poderia ser feito com o tachado que é um risco no meio das letras, mas acho isso é recomendável somente para textos com tamanho de letra maior porque às vezes fica ruim de ler. O código para colocar um risco no meio das letras é

.main a:hover{text-decoration: line-through;}

Uma coisa que já vimos em alguns blogs e não é aconselhável fazer é usar fonte normal para o link e quando coloca o mouse sobre ele o texto fica em negrito, itálico ou muda de tamanho, isso é ruim, pois faz a pagina dar “um pulo”, quero dizer movimenta tudo que está em volta do link, então quando for usar algum efeito para quando o mouse está sobre o link cuidado para não alterar o espaço que ele ocupa, apenas troque cores ou coloque traços como mostramos nesta postagem.

Se quiser usar o sublinhado, sobrelinha, ou tachado em outras partes do blog é só trocar a palavra main por sidebar para o menu ou então deixar somente a:hover{...} isso usará o efeito no blog inteiro. Caso seu blog tenha algum desses efeitos e você queria tirar basta colocar a palava none no código, assim:

.main a:hover{text-decoration: none;}

Outro detalhe importante é antes de colocar esse código veja se já não existe outro igual dando outras instruções, ou seja, se colocar esse código com tachado para as postagens e já existir em outra parte um código dizendo que as postagens não têm nenhum efeito pode gerar conflito e não funciona. Para usar esses efeitos nos link quando não está com o mouse sobre eles apenas apague :hover e deixe somente a letra "a" junto com a palavra main, assim main a{....}.

Para usar esses efeitos em um texto especifico ou seja quero deixar somente essas letras com sublinhado e sobrelinha, então escrevo deste jeito:

<span style="text-decoration: underline overline">seu texto aqui</span>

Só precisa escrever seu texto e trocar as palavras que definem o efeito e já está pronto esse é uma boa maneira de dar destaque para algumas palavras no meio do texto sejam elas links ou não.

Veja também:
Fundo semi transparente
Imagens aleatórias
Barra de endereço animada
Banners deslizando
Fixar botões no canto da pagina