Почему появляется ссылка на ссылку после нажатия ссылки?

У меня есть анкерный тег в стиле text-decoration: none.

Это удалило подчеркивание из моих ссылок, и это то, что я хочу.

Однако после щелчка ссылки небольшие пробелы подчеркивания ссылок появляются под пробелами между значками в ссылке.

У меня есть что-то вроде этого

<a ng-click="toggle(this)" style="text-decoration: none">
  <i class="fa fa-caret-down"  ng-if="!collapsed"></i>
  <i class="fa fa-folder-open-o" ng-if="!collapsed"></i>
  <i class="fa fa-caret-right"  ng-if="collapsed"></i>
  <i class="fa fa-folder-o" ng-if="collapsed"></i>
</a>

(Использование шрифтов с удивительными значками)

Подчеркнутая строка находится под пробелом между значками.

Есть ли способ избавиться от этой ссылки подчеркивать один раз и всегда?!

Ответ 1

Это потому, что значения CSS по умолчанию для ссылок объявляются разными браузерами. Ссылка имеет 4 официальных состояния.

Normal
Hover
Активен (на mouseclick)
посещения
(Focus)

В CSS вы можете объявить стиль для каждого из них. Если вы хотите, чтобы ссылка не отображала текстовое оформление в этих состояниях:

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

Отвечайте на свой комментарий

Да, вы можете заменить a на имя класса. Например, у вас есть ссылка с классом "myLink".

Вы можете сделать CSS:

.myLink, .myLink:hover, .myLink:active, .myLink:visited, .myLink:focus {
    text-decoration:none;
}

Ответ 2

Правильный путь, и вы должны его охватить, добавив в определение таблицы стилей следующее css:

**Longer CSS Styling definition:** 

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

**Shorter CSS definition:**

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

это не будет подчеркивать в все состояния ссылок, чтобы быть абсолютно уверенным, что не будет подчеркиваться ни в одной из ссылок на странице. Вы также можете сконденсировать определение стиля в своем CSS, чтобы код не был длинным, и более эффективно управлять стилем для всех видов поведения ссылок, поскольку он применяется ко всем ссылкам на странице, когда вы определение a

если вы хотите стилизовать его для определенных ссылок, вы должны сделать следующее:

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

<a href="/" class="nav">styled links</a>.

или что-то совершенно другое добавление в цветах, overline, font weight, size, которые будут отличаться в каждом состоянии связи для этого конкретного класса.

a.external:link    {color: #0000ff; font-size: 18pt; font-weight: bold; }
a.external:visited {color: #894f7b; font-weight: bold; }
a.external:hover   {text-decoration: overline; background-color: #003399; }
a.external:active  {color: red; }

Ответ 3

Вы используете неправильное свойство... text-decoration-line не предназначен для этого.

Свойство text-decoration-line указывает, какой тип строки, если таковой имеется, будет иметь

Вместо этого используйте text-decoration: none

Ответ 4

<style>
   a{text-decoration:none}
   a:visited{text-decoration:none}
</style>

Добавить таблицу стилей в ваш проект