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

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

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

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

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

Ответ 2

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

Например:

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

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

Ответ 3

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

Ответ 4

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

style="text-decoration:none;"

Пример:

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

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

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

Ответ 5

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

Попробуйте это (с помощью каких-либо селекторов CSS вам подходит):

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

    text-decoration: none!important;

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

Ответ 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>

Ответ 7

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

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

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

Ответ 8

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

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

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

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

Ответ 9

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

a {
   text-decoration:none;
}

Это приведет к удалению подчеркивания с КАЖДОЙ ОДНОЙ СВЯЗИ на вашей странице!

Ответ 10

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

Ответ 11

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

border:0;

и вы охвачены. Работала идеально для меня, когда свойство text-decoration dont работает вообще.

Ответ 12

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

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

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

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

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

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

Ответ 13

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

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

Код позади:

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

Ответ 14

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

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

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

ИЛИ ЖЕ

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

ИЛИ ЖЕ

a{text-decoration: none !important;}

Ответ 15

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

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

Ответ 16

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