Por defecto, la mayoría de los navegadores utilizan un subrayado de una línea para mostrar los enlaces que tiene nuestra página web. Las hojas de estilo CSS nos permiten modificar este comportamiento y dotar a los elementos de una página (enlaces incluidos) del diseño que más nos guste.
En este caso vamos a hacer que el subrayado del enlace sea una línea de puntos. Para tener un subrayado con puntos en CSS nos vamos a apoyar en la propiedad border-bottom. Mediante esta propiedad podemos dar estilo al borde inferior de un elemento. En el caso de un enlace, el borde inferior de un elemento coincide con su subrayado.
Todas las propiedades CSS de los enlaces se las asignaremos al elemento A. Para ello crearemos, en la cabecera de la página, unas etiquetas de estilos:
Lo primero que tenemos que hacer para tener un subrayado con puntos en CSS es eliminar el subrayado por defecto del elemento. El subrayado del enlace lo refleja la propiedad text-decoration. Para eliminar el subrayado le asignamos el valor de none.
a {
text-decoration:none;
}
Ahora vamos a definir el subrayado con puntos en CSS. La propiedad border-bottom tiene tres valores separados por blancos. Ancho, estilo y color. El estilo de puntos es «dotted». De esta forma, si queremos definir un ancho de 1px sería el siguiente código:
a {
border-bottom:1px dotted #9999CC;
text-decoration:none;
}
Solo nos quedará el añadir un enlace a nuestra página web y ya tenemos el subrayado con puntos en CSS.
