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

Question

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

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

}

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

667 14

css hyperlink underline

14 ответов:

Comments

Ничего не найдено.

Davor Lucic · Accepted Answer · 2016-03-09 17:13:52

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

попробуйте это:
.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

JYelton · Accepted Answer · 2016-05-02 20:32:56

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

например:
a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}
см.W3.org для получения дополнительной информации о псевдоклассы действий пользователя: hover,: active и: focus.

Alex K. · Accepted Answer · 2014-07-17 17:02:18

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

Nagarajan S R · Accepted Answer · 2014-03-07 19:24:00

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

style="text-decoration:none;"

пример:
<a href="page.html"  style="text-decoration:none;"></a>
или использовать способ CSS.
.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

jeffmjack · Accepted Answer · 2017-03-12 00:58:33

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

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

    text-decoration: none!important;

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

Santosh Khalse · Accepted Answer · 2017-01-19 14:50:18

вы пропустили 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>
дополнительные стандартные свойства для оформления текста

artlung · Accepted Answer · 2010-05-07 18:44:01

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

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

Это где с помощью Firefox Web Developer Toolbar это потрясающе, вы можете редактировать CSS прямо там и посмотреть, если все работает, по крайней мере для Firefox. Это под CSS > Edit CSS.

Joel Crawford-Smith · Accepted Answer · 2010-05-20 18:46:04

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

Не забудьте снять границу с ваших псевдо-классов тоже!
a, a:link, a:visited, a:active, a:hover {border:0!important;}
этот фрагмент предполагает его на якоре, изменить его оболочку соответственно... и используйте специфику вместо "!важно " после того, как вы отследите первопричину.

champ8686 · Accepted Answer · 2017-06-30 21:23:02

в то время как другие ответы верны, есть простой способ избавиться от подчеркивания на всех этих надоедливых ссылках:
a {
   text-decoration:none;
}
Это позволит удалить подчеркивание из каждой ссылки на Вашей странице!

MK Sandhu · Accepted Answer · 2016-09-22 12:11:46

просто используйте свойство
border:0;
и вы охвачены. Работал отлично для меня, когда текст-украшение свойство dint работы на всех.

Neo · Accepted Answer · 2018-07-12 07:22:33

ни один из ответов работал для меня. В моем случае был стандарт
a:-webkit-any-link {
text-decoration: underline;
в моем коде. В принципе, какая бы ссылка ни была, цвет текста становится синим, и ссылка остается тем, что есть.

поэтому я добавил код в конце заголовка следующим образом:
<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>
и проблем больше нет.

Deke · Accepted Answer · 2018-06-12 04:09:20

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

Md Abul Bashar · Accepted Answer · 2018-06-22 22:50:55

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

вы можете использовать этот код
.boxhead h2 a{text-decoration: none;}
или
.boxhead a{text-decoration: none !important;}
или
a{text-decoration: none !important;}

JoshYates1980 · Accepted Answer · 2017-03-08 18:21:16

вот пример для asp.net webforms LinkButton control:
 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />
код:
 lbmmr1.Attributes.Add("style", "text-decoration: none;")