CSS · справочник

Свойство text-decoration

text-decoration добавляет линии к тексту. Чаще всего это подчёркивание ссылки или перечёркивание старой цены.

Подчёркивание ссылки

Линию можно настроить по цвету, толщине и положению. text-underline-offset отделяет её от букв и улучшает читаемость.

a {
  text-decoration-line: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .2em;
}

Короткая запись

В shorthand можно объединить вид линии, стиль, цвет и толщину. Не полагайся только на цвет, чтобы отличить ссылку в тексте.

.old-price {
  text-decoration: line-through solid #94a3b8 2px;
}

Частые ошибки

• Ссылка отличается только цветом.
• Декоративная линия ухудшает чтение.
• Удалено подчёркивание без замены.
• Перечёркивание используется для важного нового текста.

Связанные темы

color · Псевдоклассы · Ссылки