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

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

  • автор:

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

В вашем примере подчеркивания у ссылки нет. И достаточно всего одного text-decoration:none для дефолтного положения ссылки. Проверяйте какие классы еще навешаны на ссылки. Может там вообще border-bottom установлен.

26 июл 2017 в 9:21

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Значит для ваших ссылок как-то был указан другой стиль. Попробуйте поместить код в конец и добавить !important . а для всех псевдоэлементов указывать нет смысла т.к. color и text-decoraition наследуется. а еще может и border установлен.

Отслеживать

2,969 3 3 золотых знака 15 15 серебряных знаков 30 30 бронзовых знаков

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

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

По умолчанию все ссылки имеют подчеркивание. Это всегда стоит помнить при создании новых классов для тега в CSS.

За подчеркивание ссылок отвечает специальное свойство CSS text-decoration, которое может принимать следующие значения:

  • underline (подчеркивание есть);
  • none (выключить подчеркивание);

Примеры использования text-decoration

Пример №1. Убираем подчеркивание у ссылки

Рассмотрим первый вариант, в котором мы зададим общий (шаблонный) стиль для ссылок (цвет и размер) и еще зададим два класса ссылок. Класс podcherk включает ссылке подчеркивание, а notpodcherk соответственно убирает подчеркивание. Следующий код демонстрирует это:

html> head> style type value">text/css"> a< color: blue; /* цвет ссылки синий */ font-size:12px; /* размер 12 пикселей */ > .podcherk /* у ссылки с классом podcherk будет подчеркивание всегда */ < text-decoration: underline > .notpodcherk /* у ссылки с классом notpodcherk не будет подчеркивания по умолчанию */ < text-decoration: none > .notpodcherk:hover < text-decoration: none > style> /head> body> a class value">podcherk" href="">Ссылка с подчеркиваниемa> a class value">notpodcherk" href="">Ссылка без подчеркиванияa> a href="">Ссылка с подчеркиванием и без classa> /body> /html>

Вот во что преобразуется этот код:

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

Пример №2. Убираем подчеркивание при наведение

Теперь рассмотрим такой случай, чтобы сделать подчеркивание ссылки при наведение курсора на неё.

html> head> style type value">text/css"> a< color: blue; /* цвет ссылки синий */ font-size:12px; /* размер 12 пикселей */ text-decoration: none; /* убираем подчеркивание */ > a:hover /* при наведение мышки на ссылку она будет подчеркиваться, т.к. стоит параметр underline */ < text-decoration: underline > a:visited /* класс для посещенных ссылок (изменяем их цвет на черный) */ < color:black; > style> /head> body> a href="">Ссылка 1a> /body> /html>

Данный код преобразуется в такую ссылку:

Пример №3. Делаем красивое подчеркивание

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

html> head> style type value">text/css"> a < color: #000000; /* цвет ссылки */ text-decoration: none; /* убираем подчеркивание */ > a.link_1 < border-bottom: 1px #0000ff dashed; /* пунктирное подчеркивание ссылки */ zoom:1; /* для IE6 и IE7 */ > a.link_1:hover /* цвет подчеркивания при наведении курсора */ < border-color: #00aaff; > a.link_2 < border-bottom: 3px #0000ff solid; /* сплошное подчеркивание */ padding-bottom: 1px; /* отступ между подчеркиванием и ссылкой */ > a.link_2:hover /* цвет подчеркивания при наведении курсора */ < border-color: #00aaff; > a.link_3 < background: url("img/fon_off.jpg") 0 100%; /* фон третьей ссылки */ padding-bottom: 2px; /* отступ от ссылки */ > a.link_3:hover /* фон при наведении */ < background: url("img/fon_on.jpg") 0 100%; > style> /head> body> a class css">link_1" href="">Ссылка с пунктирным подчеркиваниемa> a class css">link_2" href="">Ссылка со сплошным подчеркиваниемa> a class css">link_3" href="">Ссылка с подчеркиванием в виде фонаa> /body> /html>

Преобразуется на странице в:

Вот в принципе и все самые интересные примеры по подчеркиванию ссылок. Главным ответом на вопрос этой статьи служит строка: text-decoration: none (убирает подчеркивание).

Как избавиться от подчеркивания ссылок html?

Добрый день. Надоело на сайте подчеркивание ссылок, как избавиться, это понятно. Вопрос — как без подчеркивания сделать акцент что это ссылка, а не просто текст?

  • Вопрос задан более трёх лет назад
  • 14244 просмотра

Комментировать
Решения вопроса 1

Aliance

Убрать подчеркивание можно с помощью css селектора
a

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

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

a < text-decoration: none; color: navy; >a:hover

Ответ написан более трёх лет назад
Нравится 3 3 комментария
Алексей Калинин @Kaliha Автор вопроса
Для меня это стало приемлемым решением.

oxyberg

Ужасная хурма, лучше используюйте нижний бордюр.

Niktam

а почему цвет не берет.
Ответы на вопрос 7

0neS

Ответ написан более трёх лет назад
Комментировать
Нравится 6 Комментировать

Умный парень Лебедев советует не избавляться от подчеркивания ссылок. Лучше придумайте, как сделать подчеркивание в подходящем стиле.

Ответ написан более трёх лет назад
Комментировать
Нравится 5 Комментировать
Сделать другого цвета, отличного от текста
Ответ написан более трёх лет назад
Нравится 1 5 комментариев

0neS

b8a16e6c448647e69efb0a1671b5e1fd.png

Где тут ссылки, а где нет?

Trow_eu

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

0neS

@Trow_eu не стоит кнопки относить к ссылкам, хоть иногда их и верстают тегом a, вместо button
Поставить в скобках ( ссылка ) ))

Trow_eu

@0neS просто пример первый, возможно неудачный, я кнопки редко делал, хотя признаю через a.
иногда меню сильно отделено и весьма понятно, а с подчеркиванием смотрится плохо.
пример, который выглядит еще норм, но под капотом страх и ужас, мой второй сайт и первый заказ.. www.karaoke-utesov.com.ua

Алексей Калинин @Kaliha Автор вопроса
Системный администратор хостинга

376c7316fab949cda1cc380eb06c0611.png

Для понимания почему хочу избавится от подчеркивания пример с сайта.

Ответ написан более трёх лет назад

Здесь достаточно изменить «комментарии: все» на «все комментарии», изменить цвет и можно убирать подчёркивание.

oxyberg

А тут у вас border-bottom, так и пишите none.

Три первостепенных фактора:
1. выделить цветом отличного от основного текста
2. при наведении менять цвет или добавлять подчеркивание
3. cursor: pointer

Ответ написан более трёх лет назад

0neS

Я должен водить по всему экрану, чтобы понять, где ссылки, а где просто текст?
прочитайте первый пункт

Посмотрите прямо на этой странице блок справа «Заказы с Фрилансим» вам понятно какое слово ссылка, а какое нет?

Судя по приведенному автором примеру, автор не разделяет контент и управление.

Kaliha — ссылки которые интерфейсные (управление), действие которых очевидно, можно не выделять подчеркиванием. В это попадают все элементы из «Комментарии» и уже станет проще.
Ссылки на которые повязан JS (попап окна к примеру) можно выделять пунктиром.

Отделяем мух от котлет 🙂

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

Используйте свойство text-decoration со значением none для селектора A .

Описание

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

Чтобы ссылки не подчер кивались, для селектора A следует добавить свойство text-decoration со значением none , как показано в примере 1.

Пример 1. Ссылка без подчеркивания

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Ссылки без подчеркивания   

Ссылка без подчеркивания

Результат данного примера показан ни рис. 1.

Ссылка, у которой отсутствует подчёркивание

Рис. 1. Ссылка, у которой отсутствует подчёркивание

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *