Видаліть вперте підкреслення зі посилання

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>

Розгорніть фрагмент

Як я можу видалити синє підкреслення зі посилання?

css hyperlink underline

— дмр
джерело

1

Ну, це повинно піти, коли ви робите декорування тексту: жодного. Ви впевнені, що застосовуєте це до потрібного елемента? Чи можете ви надати приклад коду?

— Давор Лучич

Де текст-оздоблення: жодне не використовується?

— човник87

771

Як я і очікував, ви застосовуєте не text-decoration: none;якір ( .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;. / хак

— Ryan Burbidge

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 для отримання додаткової інформації про псевдокласи дій користувачів: наведіть курсор ,: активний і: фокус.

— JYelton
джерело

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;зафіксувало це для мене.

— Helder S Ribeiro

27

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

style="text-decoration:none;"

Приклад:

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

Або скористайтеся способом CSS.

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

— Nagarajan SR
джерело

16

Іноді те, що ви бачите, - це тіньова скринька, а не підкреслення тексту.

Спробуйте це (використовуючи всі вибрані CSS для вас):

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

    text-decoration: none!important;

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

— jeffmjack
джерело

1

Це має бути відповіддю. Іноді, тінь коробки надає підкреслений ефект.

— Бхаргав

Це відповідь, але не найкраща. Сфера їх застосування глобальна і не конкретна. Щось подібне має зробити трюк: .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.

— artlung
джерело

9

Як правило, якщо ваш "підкреслення" не є тим самим кольором, що ваш текст [і 'color:' не перекреслюється в рядку), він не походить від "text-decoration:" Це повинно бути "border-bottom:"

Не забувайте також знімати кордон зі своїх псевдокласів!

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

Цей фрагмент передбачає його на якорі, відповідно змініть його на обгортці ... та використовуйте специфіку замість "! Важливо" після того, як ви виявите першопричину.

— Джоел Крофорд-Сміт
джерело

4

Хоча інші відповіді правильні, є простий спосіб позбутися підкреслення всіх цих прискіпливих посилань:

a {
   text-decoration:none;
}

Це видалить підкреслення з КОЖНОГО єдиного посилання на вашій сторінці!

— ярз-тех
джерело

переконайтеся, що його на тезі прив’язки та вбудовування можуть бути кращими, оскільки ви, можливо, хочете підкреслити інші посилання.

— Asuquo12

2

Якщо text-decoration: noneчи border: 0не працює, спробуйте застосувати вбудований стиль у вашому HTML.

— Деке
джерело

1

Просто використовуйте майно

border:0;

і ти вкритий. Для мене прекрасно працював, коли взагалі працює фарба для обробки тексту.

— М. К. Сандху
джерело

1

Жодна відповідь не працювала для мене. У моєму випадку був стандарт

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

в моєму коді. В основному, якою б вона не була, колір тексту стає синім, а посилання залишається будь-яким.

Тому я додав код в кінці заголовка так:

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

і проблем більше немає.

— Нео
джерело

1

  a {
    color: unset;
    text-decoration: unset;
  }

— ітжар
джерело

0

Ось приклад для управління веб-формами asp.net LinkButton:

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

Код позаду:

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

— JoshYates1980
джерело

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>

— qarly_blue
джерело

0

У моєму випадку у мене погано сформований HTML. Посилання було <u>тегом, а не <ul>тегом.

— mwilcox
джерело

0

Як зазначали інші, схоже, що ви не можете переосмислити вкладені стилі декорування тексту ... Але ви можете змінити колір тексту-прикраси.

Як хак, я змінив колір на прозорий:

текст-прикраса-колір: прозорий;

— Бен
джерело