> Faqs > Tachado con CSS

Tachado con CSS

Hola! quiero hacer que un texto aparezca tachado, con una línea horizontal por en medio del texto. Esto lo quiero hacer con un estilo css, ya que es un estilo de texto. Gracias por su ayuda!

Respuestas

El tachado con CSS lo consigues con el atributo text-decoration.

El atributo text decoration de CSS te acepta varios valores, por ejemplo el tachado de texto, pero también el subrayado, o incluso el rayado por encima de la línea (que no sé muy bien en qué casos puede servir, pero se puede usar también).

Pues bien, el texto tachado lo consigues con el valor "line-through".

<span style="text-decoration:line-through;">
    Este texto aparecerá tachado
</span>

Recuerda que usar estilos inline no es una buena práctica, así que lo ideal sería que usases alguna clase o algo, para definir tu estilo. Por ejemplo, una clase llamada "incorrecto".

<p class="incorrecto">
    Este párrafo contiene información que no sería correcta y por tanto debería aparecer con estilo tachado.
</p>

Luego definirías el CSS de esta manera:

.incorrecto {
    text-decoration:line-through;
    color: red;
}

En este caso, además de tachado, el texto incorrecto aparecería con color rojo.

Como siempre, te recordamos que tienes este y muchos otros trucos de CSS aquí en DesarrolloWeb.com, en la sección de CSS.

Miguel Angel
3310 147 216 17
  • El atributo es "text-decoration"
  • El valor CSS para tachado es "line-through"

Ejemplo:

span {
    text-decoration:line-through;
}
Alba
355 9 25 13