Как удалить подчеркивание для тега привязки с помощью CSS?
Опубликовано: 18 Декабря, 2021
Тег привязки используется для определения гиперссылок и по умолчанию отображает подчеркнутую часть привязки. Подчеркивание можно легко удалить с помощью свойства text-decoration. Свойство CSS text-decoration позволяет украсить текст в соответствии с требованиями. Установив для text-decoration значение none, чтобы удалить подчеркивание из тега привязки.
Синтаксис:
текстовое оформление: нет;
Пример 1. В этом примере для свойства text-decoration устанавливается значение none.
<!-- HTML code to remove underline from anchor tag --><!DOCTYPE html>< html > < head > < title > text-decoration property </ title > <!-- text-decoration property to remove underline from anchor tag --> < style > #GFG { text-decoration: none; } </ style ></ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < h3 >Original Link</ h3 > < a href = "#" >Link 1</ a > < br > < h3 >removed Underline</ h3 > < a id = "GFG" href = "#" >Link 2</ a ></ body > </ html > |
Выход:
Пример 2: Используйте свойство hover для удаления подчеркивания при наведении курсора мыши на часть привязки.
<!-- HTML code to remove underline from anchor tag --><!DOCTYPE html>< html > < head > < title > text-decoration property </ title > <!-- text-decoration property to remove underline from anchor tag --> < style > a:link { text-decoration: underline; } a:hover { text-decoration: none; } </ style ></ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < a id = "GFG" href = "#" >GeeksforGeeks Anchor Part</ a ></ body > </ html > |
Выход:
Перед перемещением мыши:
После перемещения мыши: