Estilos para enlaces - Curso de CSS3 básico - Capítulo 10

En esta ocasión te voy a enseñar a decorar el texto de los enlaces con CSS. No obstante, todo lo que vas a aprender en este capítulo, lo podrás aplicar a cualquier elemento de tipo texto como los párrafos, cabeceras, etc.

Un enlace por defecto

Por defecto, un enlace nos suele aparecer de esta forma en el navegador:

Enlace de html por defecto

Aplicando estilo a todos los enlaces

Voy a aplicar el estilo a todas las etiquetas <a>, de este modo, afectará a todos los enlaces.

text-decoration none

Utilizando el valor none en text-decoration vamos a obtener enlaces que seguirán con su color azul, pero perderán el subrayado.

CSS

a {
	text-decoration: none;
}

Enlace con text decoration none

Tipos de líneas para enlaces

En los enlaces, podemos especificar si queremos que la raya del subrayado aparezca en medio (tachado) o incluso arriba del enlace.

Enlace tachado

Con el valor line-through conseguimos el efecto de enlace tachado. Esto se utiliza normalmente para desahbilitar un enlace borrado, pero que quede constancia al usuario, que anteriormente había ahí un enlace. Se hace también muchos con texto como el de los párrafos.

CSS

a {
	text-decoration: line-through;
	color: red;
	font-size:100px;
}
Enlace tachado

Enlaces con línea superior

Con el siguiente valor, podemos hacer que la línea aparezca por encima del texto del enlace.

CSS

a {
	text-decoration: overline;
	color: red;
	font-size:100px;
}
Enlace con overline css

Finalmente, te debo indicar que si utilizas text-decoration: underline; creas el efecto de subrayado que tienen los enlaces por defecto.


Capítulos


    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


    Comentarios

    Si te quedan dudas sobre el temario, sobre CSS, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.