Propiedad CSS text-decoration-skip-ink

La propiedad text-decoration-skip-ink especifica cómo se dibujan los subrayados y los trazos superiores cuando cruzan sobre un glifo.

INFO

Cuando la text-decoration-line propiedad está configurada en "underline" y "overline", la propiedad text-decoration-skip-ink tiene efecto. El valor "Line-through" no se ve afectado.

Valor inicial	auto
Se aplica a	Todos los elementos.
Heredable	Sí.
Animable	No.
Versión	CSS Text Decoration Module Level 4
Sintaxis DOM	object.style.textDecorationSkipInk = "none";

Sintaxis

Valores de CSS text-decoration-skip-ink

css

text-decoration-skip-ink: auto | none | initial | inherit;

Ejemplo de la propiedad text-decoration-skip-ink:

Ejemplo de código CSS text-decoration-skip-ink

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .ex1 {
        margin: 0;
        font-size: 2em;
        text-decoration: underline #1c87c9;
        text-decoration-skip-ink: none;
      }
      .ex2 {
        margin: 0;
        font-size: 2em;
        text-decoration: underline #1c87c9;
        text-decoration-skip-ink: auto;
      }
    </style>
  </head>
  <body>
    <h2>
        Text-decoration-skip-ink property example
    </h2>
    <h3>
        Text-decoration-skip-ink: none;
    </h3>
    <p class="ex1">
      Lorem ipsum is simply dummy text
    </p>
    <h3>
        Text-decoration-skip-ink:auto;
    </h3>
    <p class="ex2">
      Lorem ipsum is simply dummy text
    </p>
  </body>
</html>

Try it Yourself »

Resultado

CSS text-decoration-skip-ink values list

Valores

Valor	Descripción
auto	Los subrayados y los trazos superiores solo se dibujan donde no tocan ni se acercan mucho a un glifo. Este es el valor predeterminado de esta propiedad.
none	Los subrayados y los trazos superiores se dibujan para todo el contenido de texto, incluidas las partes que cruzan sobre los descendentes y ascendentes de los glifos.
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad CSS 'text-decoration-skip-ink'?

Obliga al texto a ser subrayado sin omitir ningún carácter.Hace que el subrayado omita los descendentes.Cambia el color del subrayado para que sea igual al del enlace.Modifica el estilo del subrayado para que sea punteado, discontinuo o sólido.Aplica automáticamente un subrayado al texto.Puede evitar que los subrayados corten los glifos.

Propiedad CSS text-decoration-skip-ink ​

Sintaxis ​

Ejemplo de la propiedad text-decoration-skip-ink: ​

Resultado ​