text-decoration-skip-ink

Свойство 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 корректно не сработает, так как линия появится поверх самого высокого глифа текста.