Оригінальна публікація: https://www.freecodecamp.org/news/remove-underline-from-link-in-css/

Якщо ви веброзробник, ви, ймовірно, хотіли прибрати підкреслення, яке з’являється для посилання на сторінку за замовчуванням.

На щастя, ви можете стилізувати теги посилання, як і всі інші елементи вебсторінки.

У цій публікації я покажу, як прибрати підкреслення для посилання за допомогою CSS. Я також покажу чотири можливі стани посилання та як прибрати підкреслення для кожного.

Як прибрати підкреслення для посилання у CSS

За замовчуванням тег посилання у браузері виглядає так:

ss1-4

По-перше, важливо знати, що тег посилання може перебувати у 4 різних станах, які називають псевдокласами:

  • a:link: звичайний стан неактивного посилання (користувач не відвідав його або не навів мишкою)
  • a:visited: користувач відвідав посилання
  • a:hover: користувач наводить мишкою на посилання
  • a:active: користувач натискає на посилання

Примітка: стани (псевдокласи) мають з’являтися у вищеподаному порядку через каскадну природу CSS.

Щоб прибрати підкреслення за замовчуванням, можна націлити всі псевдокласи та призначити їм властивість text-decoration зі значенням none.

<p>This is a <a href="#">link</a></p>

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}
ss2-4

Ви також можете прибрати підкреслення в один прийом за допомогою селектора елемента посилання:

 a {
       text-decoration: none;
}
ss3-5

Можете погратися з 4 псевдокласами тегу посилання:

Стани тегу посилання

Висновок

Сподіваюсь, ця публікація допомогла дізнатись, як прибрати підкреслення для посилань у CSS.

Якщо публікація була корисною, не забудьте поділитися з друзями та рідними.

Дякую, що прочитали.