Pseudo-clases dinámicas (3)

Aquí vamos a poner los links como ítems de una lista y cambiar el estilo de lista para conseguir un efecto dinámico. A los links normales y visitados se les define esta imagen como marcadro de la lista: . A los visitados se les define un color rojo para diferenciarlos. A los links que son señalados se les define esta otra imagen de modo que al pasar el cursor sobre él, el marcador cambia dando el efecto de iluminarse.

A:link {list-style-image: url("ps_1.gif")}
A:visited {list-style-image: url("ps_1.gif"); color: red}
A:hover, A:active {list-style-image: url("ps_2.gif")}

Observe con cuánta economía se consigue este efecto. Con HTML hubiera demandado insertar cada imagen en el link y luego usar un lenguaje de programación para conseguir el efecto. En vez de eso, el código de los links de esta página es simplemente:

<ul>
 <li><a href="ps_din1.html">Link 1 </a></li>
 <li><a href="ps_din2.html">Link 2 </a></li>
</ul>