Как изменить подчеркивание HTML-ссылки на веб-странице

В этой статье объясняется несколько способов использования CSS для изменения внешнего вида текстовых ссылок на вашей веб-странице по умолчанию, удалив подчеркивание, изменив его на пунктирную линию или изменив его цвет. Дополнительная информация включена для замены подчеркивания пунктирной линией или двойным подчеркиванием.

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

По умолчанию в веб-браузерах есть определенные Стили CSS что они применяются к определенным элементам HTML. Если вы не перезаписываете эти значения по умолчанию собственными таблицами стилей вашего сайта, то применяются значения по умолчанию. Для

гиперссылки, стиль отображения по умолчанию заключается в том, что любой связанный текст выделяется синим цветом и подчеркивается. При желании вы можете изменить внешний вид этих подчеркиваний или полностью удалить их со своей веб-страницы.

Чтобы удалить подчеркивание из текстовых ссылок, используйте свойство CSS text-decoration. Вот CSS, который вы пишете для этого:

а {текст-украшение: нет; }

С помощью этой единственной строки CSS вы удаляете подчеркивание со всех текстовых ссылок на своей веб-странице. Несмотря на то, что это очень общий стиль (в нем используется селектор элементов), он все же имеет большую специфичность, чем стили браузеров по умолчанию. Поскольку именно эти стили по умолчанию создают подчеркивание с самого начала, это то, что вам нужно перезаписать.

Предупреждение об удалении подчеркивания

Визуально удаление подчеркивания может быть именно тем, чего вы хотите добиться, но вы также должны быть осторожны, когда делаете это. Нравится вам внешний вид подчеркнутых ссылок или нет, вы не можете утверждать, что они делают очевидным, какой текст связан, а какой нет. Если вы уберете подчеркивание или измените синий цвет ссылки по умолчанию, убедитесь, что вы заменили их стилями, которые по-прежнему позволяют выделять связанный текст. Это сделает работу посетителей вашего сайта более интуитивно понятной.

Не подчеркивайте не-ссылки

Еще одно предостережение относительно ссылок и подчеркиваний: не подчеркивайте текст, который не является ссылкой, чтобы подчеркнуть его. Люди привыкли ожидать, что подчеркнутый текст будет ссылкой, поэтому, если вы подчеркиваете контент, чтобы добавить выделение (вместо того, чтобы выделить его жирным шрифтом или курсивом), вы отправите неправильное сообщение и запутаете сайт пользователей.

Как изменить подчеркивание на точки или тире

Если вы хотите сохранить подчеркивание текстовой ссылки, но изменить стиль подчеркивания по умолчанию, то есть «сплошная» линия, вы тоже можете это сделать. Вместо этой сплошной линии вы можете использовать точки, чтобы подчеркивать ссылки. Для этого вы все равно удалите подчеркивание, но замените его свойством стиля border-bottom:

а {текст-украшение: нет; нижняя граница: 1px с точками; }

Поскольку вы удалили стандартное подчеркивание, появляется только пунктирная линия.

Вы можете сделать то же самое, чтобы получить тире. Просто измените стиль нижней границы на пунктирный:

а {текст-украшение: нет; нижняя граница: пунктирная линия 1px; }

Как изменить цвет подчеркивания

Еще один способ привлечь внимание к своим ссылкам - изменить цвет подчеркивания. Просто убедитесь, что цвет подходит вашему Цветовая схема.

а {текст-украшение: нет; нижняя граница: сплошной красный 1px; }

Двойное подчеркивание

Уловка использования двойных подчеркиваний заключается в том, что вам нужно изменить ширину границы. Если вы создадите границу шириной 1 пиксель, вы получите двойное подчеркивание, которое выглядит как одинарное подчеркивание.

а {текст-украшение: нет; нижняя граница: 3px двойной; }

Вы также можете использовать существующее подчеркивание, чтобы сделать двойное подчеркивание с другими функциями, такими как одна из пунктирных линий:

{border-bottom: 1px двойной; }

Не забывайте о состояниях ссылок

Вы можете добавить стиль нижней границы к своим ссылкам в разных состояниях, таких как: hover,: active или: посещено. Это может создать для посетителей приятный стиль «наведения», когда вы используете псевдокласс «hover». Чтобы при наведении курсора на ссылку появлялась вторая пунктирная линия подчеркивания:

а {текст-украшение: нет; }
a: hover {border-bottom: 1px пунктирная; }