Клавиша / esc

text-decoration-skip-ink

Как линию будем рисовать? Поверх хвостиков букв или не касаясь их?

Время чтения: меньше 5 мин

Кратко

Скопировано

Свойство text-decoration-skip-ink управляет внешним видом верхнего и нижнего подчёркиваний. Если текст нужно перечеркнуть, то свойство text-decoration-skip-ink будет проигнорировано.

Как пишется

Скопировано

Возможные значения:

  • none — линия рисуется под текстом сквозь глифы;
  • auto — линия может рисоваться так, что не касается глифов (значение по умолчанию);
  • all — линия будет рисоваться, не касаясь глифов.

Пример

Скопировано

Создадим несколько абзацев текста. Применим свойство text-decoration-skip-ink для них вместе со свойством text-decoration с разными значениями.

        
          
          a {  text-decoration: underline;}
          a {
  text-decoration: underline;
}

        
        
          
        
      
Открыть демо в новой вкладке
        
          
          a {  text-decoration: overline;}
          a {
  text-decoration: overline;
}

        
        
          
        
      
Открыть демо в новой вкладке

Подсказки

Скопировано

💡 text-decoration-skip-ink работает только вместе с text-decoration.

Если написать

        
          
          p {  text-decoration-skip-ink: auto;}
          p {
  text-decoration-skip-ink: auto;
}

        
        
          
        
      

text-decoration-skip-ink применится, но не сработает корректно.

Чтобы этого избежать, нужно немного исправить код выше:

        
          
            p {+   text-decoration: underline;    text-decoration-skip-ink: auto;  }
            p {
+   text-decoration: underline;
    text-decoration-skip-ink: auto;
  }

        
        
          
        
      

💡 text-decoration-skip-ink при наличии text-decoration: overline корректно не сработает, так как линия появится поверх самого высокого глифа текста.