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

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

HTML:

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

CSS-код:

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

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

426
css hyperlink underline

14 ответов

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

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

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

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

например:

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

посмотреть W3.org подробнее о псевдоклассы действий пользователя: hover,: active и: focus.

175

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

26

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

style="text-decoration:none;"

пример:

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

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

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

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

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

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

    text-decoration: none!important;

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

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

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

enter image description here

8

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

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

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

7

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

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

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

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

7

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

a {
   text-decoration:none;
}

это удалит подчеркивание из каждой ссылки на Вашей странице!

2

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

border:0;

и вы охвачены. Отлично сработало для меня, когда свойство текстового оформления вообще работает.

1

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

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

в моем коде. В основном все, Ссылка, цвет текста идет синий, и ссылка остается все это.

поэтому я добавил код в конце заголовка следующим образом:

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

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

1

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

0

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

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

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

или

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

или

a{text-decoration: none !important;}
0

вот пример для asp.net управление LinkButton webforms:

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

код:

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