Как убрать подчеркивание ссылок в css

Убрать подчёркивание у ссылки или другого текстового элемента можно с помощью свойства text-decoration со значением none. Если нужно установить подчёркивание обратно, то используется значение underline

.link {
  text-decoration: none;
}

Подчёркивание у ссылок убирает text-decoration: none:

a {
  text-decoration: none;
}

Правило снимет подчёркивание со всех ссылок на сайте. Только в меню:

.menu a {
  text-decoration: none;
}

Подчёркивание при наведении

Без подчёркивания пользователь может не понять, что текст — ссылка. Частый вариант — показывать линию при наведении:

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

В основном тексте статьи подчёркивание лучше оставить: ссылку должно быть видно без наведения, особенно на телефоне.

Аккуратное подчёркивание

Линию можно настроить:

a {
  text-decoration-color: rgba(0, 130, 255, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

text-underline-offset опускает линию ниже, и она не задевает буквы вроде «у» и «р».

Подчёркивание не убирается

• Линию рисует не text-decoration. Проверьте в DevTools у ссылки border-bottom или box-shadow.
• Правило перебивает более конкретный селектор. Например, .content a из темы сильнее, чем a. Повторите селектор или повысьте его специфичность.
• Подчёркивание у родителя. Если text-decoration: underline задан у блока вокруг ссылки, у самой ссылки его не снять. Уберите его у родителя.

Цвет посещённых ссылок

У посещённых ссылок браузер меняет цвет на фиолетовый. Задайте один цвет для всех состояний:

a,
a:visited {
  color: #0082ff;
}

Оформление текста и ссылок разбирают в бесплатном курсе «Введение в HTML и CSS».