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

542

Я пытаюсь показать ссылку белым цветом без подчеркивания. Цветовой текст отображается корректно , как белые, но синее подчеркивание упорно сохраняющееся. Я пытался text-decoration: none;и text-decoration: none !important;в CSS удалить ссылку, подчеркните. Ни один не работал.

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

Развернуть фрагмент

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

css hyperlink underline

— DMR
источник

1

Ну, это должно уйти, когда вы делаете текстовое оформление: нет. Вы уверены, что применяете это к нужному элементу? Можете ли вы предоставить пример кода?

— Давор Лючич

Где текстовое оформление: ни один не используется?

— shuttle87

772

Как я и ожидал, вы обращаетесь не text-decoration: none;к anchor ( .boxhead a), а к элементу span ( .boxhead).

Попробуй это:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

— Давор Лючич
источник

12

Но что, если у вас также есть текст, окружающий диапазон, и вы хотите, чтобы у окружающего текста была ссылка подчеркивания, а у текста внутри диапазона - нет?

— JMTyler

4

@ rebus, ты не можешь? Почему бы нет? Вызывать хотя бы в IE7 + и FireFox 4+ можно, но не в Chrome по какой-то причине. Вот код, который я получил для работы в не Chrome-браузерах, которые я тестировал: .toc-list a > span{text-decoration:none !important;} я думаю, что вопрос @ JMTyler является законным; Я ищу то же самое решение.

— Тони Топпер

7

Похоже text-decoration, не поддерживает переопределение вложенных тегов, как указано выше. Как только вы a { text-decoration: underline; }применили правило, вы не можете отменить его, например, с помощью a .wish_this_were_not_underlined { text-decoration: none; }. Я не могу найти ссылку на это, но это мой опыт (в Chrome).

— Небольшая

2

Как и другие выше, я не смог де-подчеркивания текста, применяя, text-decoration: none;поэтому вместо этого мы решили скрыть строку с помощью text-decoration: underline; text-decoration-color: white;. / взломать

— Райан Бурбидж

1

если вы пытаетесь удалить подчеркивание из элемента внутри якоря, а не из всего якоря. вам нужно сделать внутренний элемент встроенным блоком примерно так: .boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; }

— Патрик Денни

213

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

Например:

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

См. W3.org для получения дополнительной информации о псевдоклассах действий пользователя: hover ,: active и: focus.

— JYelton
источник

5

Я думаю, что вы имеете в виду, a:linkкогда вы говоритеa:click

— artlung

6

Это должен быть фактически принятый ответ, так как у меня возникла та же проблема ПОСЛЕ нажатия на ссылку моей кнопки. Посещаемая недвижимость все еще менялась на фиолетовую, когда я вернулся на страницу.

— Doresoom

33

text-decoration: none !importantдолжен удалить это .. Вы уверены, что там не border-bottom: 1px solidтаится? (Трассировка вычисленного стиля в Firebug / F12 в IE)

— Алекс К.
источник

4

Установка border-bottom-style: none;исправила это для меня.

— Хелдер С Рибейро

27

Просто добавьте этот атрибут в свой тег привязки

style="text-decoration:none;"

Пример:

<a href="page.html"  style="text-decoration:none;"></a>

Или используйте способ CSS.

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

— Нагараджан С.Р.
источник

16

Иногда то, что вы видите, это тень от рамки, а не подчеркивание текста.

Попробуйте это (используя те селекторы CSS, которые вам подходят):

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

— jeffmjack
источник

1

Ответ должен быть один. Иногда тень от блока подчеркивает эффект подчеркивания.

— Bhargav

Это ответ, но не самый лучший. Сфера их применения глобальна, а не конкретна. Нечто подобное должно сделать трюк: .otherPage a:link {text-decoration:none;}; Повторите это для посещенных, активных и зависания, если это необходимо.

— Аджови

14

Вы пропустили text-decoration:noneза якорный тег . Так что код должен быть следующим.

.boxhead a {
    text-decoration: none;
}

<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>

Развернуть фрагмент

Более стандартные свойства для оформления текста

— Сантош Халсе
источник

9

Не видя страницы, сложно спекулировать.

Но для меня это звучит так, как будто тебя border-bottom: 1px solid blue;подали. Возможно добавлю border: none;. text-decoration: none !importantверно, возможно, у вас есть другой стиль, который все еще переопределяет этот CSS.

Вот где использовать панель инструментов Firefox для веб-разработчиков - это здорово, вы можете отредактировать CSS прямо там и посмотреть, все ли работает, по крайней мере, для Firefox. Это под CSS > Edit CSS.

— artlung
источник

9

Как правило, если ваше «подчеркивание» не совпадает с цветом вашего текста [и «color:» не переопределяется внутри строки], оно не исходит от «text-ornament:» Это должно быть «border-bottom:»

Не забудьте убрать границы и с псевдо-классов!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

Этот фрагмент предполагает его привязку, соответственно измените его на оболочку ... и используйте специфичность вместо "! Important" после того, как вы обнаружите основную причину.

— Джоэл Кроуфорд-Смит
источник

4

Хотя остальные ответы верны, есть простой способ избавиться от подчеркивания на всех этих надоедливых ссылках:

a {
   text-decoration:none;
}

Это удалит подчеркивание из КАЖДОЙ ОДНОЙ ССЫЛКИ на вашей странице!

— yarz-тек
источник

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

— Asuquo12

2

Если text-decoration: noneили border: 0не работает, попробуйте применить встроенный стиль в вашем HTML.

— Deke
источник

1

Просто используйте собственность

border:0;

и вы прикрыты. У меня отлично сработало, когда свойство text-украшение вообще не работает.

— МК Сандху
источник

1

Ни один из ответов не сработал для меня. В моем случае был стандарт

a:-webkit-any-link {
text-decoration: underline;

в моем коде. По сути, какой бы ни была ссылка, цвет текста становится синим, а ссылка остается любой.

Поэтому я добавил код в конец заголовка так:

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

и проблемы больше нет.

— Нео
источник

1

  a {
    color: unset;
    text-decoration: unset;
  }

— itzhar
источник

0

Вот пример для элемента управления LinkButton веб-формы asp.net:

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

Код позади:

 lbmmr1.Attributes.Add("style", "text-decoration: none;")

— JoshYates1980
источник

0

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

Вы можете использовать этот код

.boxhead h2 a{text-decoration: none;}

ИЛИ

.boxhead a{text-decoration: none !important;}

ИЛИ

a{text-decoration: none !important;}

— Абдул Башар
источник

0

Поместите следующий HTML-код перед <BODY>тегом:

<STYLE>A {text-decoration: none;} </STYLE>

— qarly_blue
источник

0

В моем случае у меня был плохо сформированный HTML. Ссылка была внутри <u>тега, а не <ul>тега.

— mwilcox
источник

0

Как отмечали другие, кажется, что вы не можете переопределить вложенные стили оформления текста ... НО вы можете изменить цвет оформления текста.

Как хак, я изменил цвет, чтобы быть прозрачным:

цвет текста украшения: прозрачный;

— Бен
источник