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

Question

Я пытаюсь, чтобы ссылка отображалась белым цветом без подчеркивания. Цвет текста отображается корректно, как белые, но синее подчеркивание упорно сохраняющееся. Я попытался 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>

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

Answer 1

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

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

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

Answer 2

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

Например:

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

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

Answer 3

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

Answer 4

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

style="text-decoration:none;"

Пример:

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

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

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

Answer 5

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

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

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

    text-decoration: none!important;

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

Answer 6

Вы пропустили 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>

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

Answer 7

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

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

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

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

Answer 8

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

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

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

Answer 9

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

a {
   text-decoration:none;
}

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

Answer 10

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