Efecto rollover en enlacesde texto.

Me preguntaba Kozmica la forma de añadir el efecto rollover a un Link, me proporcionaba una página de referencia y mirando y probando creo que el efecto está conseguido, así que veamos lo que hice:

Añadimos un elemento de página y en HTML/Javascript añadimos lo siguiente:

<a class="sidebarlink" href="url-de-la-pagina">texto-link</a><span class="hide"></span>
<a class="sidebarlink" href="url-de-la-pagina">texto-link</a><span class="hide"></span>
<a class="sidebarlink" href="url-de-la-pagina">texto-link</a><span class="hide"></span>

Luego vamos a añadir unas líneas de código en la CSS, buscaremos donde
/* Sidebar Content, en algunas plantillas puede venir como /* ---( sidebar )--- */

Añadimos lo siguiente:

.sidebarlink{
text-align:left;
display:block;
background:#ffffff;
border-bottom:1px solid #000000;
padding:0px 5px 0px 5px;
margin:1px 0px 0px 0;
}

.sidebarlink:hover{
border-bottom:1px solid #000000;
background:#ccc;
}

En .sidebarlink{ es el link tal y como lo vemos.
En .sidebarlink:hover{ conseguimos el efecto rollover al pasar el cursor por encima.

Si añadimos a esas dos partes por ejemplo border-bottom:1px solid #000000; conseguimos una línea de separación entre las líneas de enlaces.

También podemos sustituir en background:#ccc; para el color de fondo del efecto rollover. Y en background:#ffffff; que será el color de fondo sin efecto.

El texto también podemos centrar el texto si sustituimos text-align:left; por text-align:center; o justificar a la derecha con text-align:right;

Podéis ver el efecto en "Enlaces" en esta prueba que hice.

!Suerte¡