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


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>

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


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.


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;
}

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.


9

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

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

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

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


4

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

a {
   text-decoration:none;
}

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


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

2

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


1

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

border:0;

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


1

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

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

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

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

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

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



0

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

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

Код позади:

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

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>


0

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


0

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

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

цвет текста украшения: прозрачный;
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.