Следите за текстом якоря, но не на шрифте.

У меня есть следующая разметка:

<a href="#" title="Feedback" id="feedbacktogglenav">
  Feedback
  <i class="icon-comment"></i>
</a>

При наведении мыши я хотел бы подчеркнуть текст, но не шрифт-удивительный значок. Я знаю, что вы можете сделать "text-decoration: none" на значке (который работает), но когда вы наводите курсор на текстовую часть, она добавляет подчеркивание к значку. Любые идеи?

http://jsfiddle.net/ZZEQd/

Ответ 1

Я нашел способ сделать это без необходимости использования дополнительного тега span, он работает в каждом браузере, в котором я его пробовал (FF/Chrome/Safari/Opera)... кроме IE8 (я еще не тестировал в IE 9 или 10).

Просто объявите значок как отображение: встроенный блок, больше не подчеркивайте при наведении указателя мыши.

Пример: http://jsfiddle.net/J432G/

HTML:

<a href="#" title="Feedback" id="feedbacktogglenav">
  Feedback<i class="icon-comment"></i>
</a>

CSS

a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}
i:after{
  content: '{icon}';
  display: inline-block;
  padding-left: 1em;
}

Ответ 2

... но когда вы наведите курсор на текстовую часть, она добавляет подчеркивание к значку. Любые идеи?

Чтобы это сработало, вам нужно будет содержать текст ссылки в отдельном элементе (a span, в идеале):

<a href="#">
    <span>Feedback</span>
    <i class="icon-comment"></i>
</a>

Теперь вы можете полностью удалить text-decoration из ссылки и назначить его только span (при наведении):

a {
    text-decoration:none;
}

a:hover span {
    text-decoration:underline;
}

демонстрация JSFiddle.

Ответ 3

Единственный способ сделать это надежно - назначить text-decoration: none первому родительскому элементу i.e начальному тегу.

Ответ 4

Кто-то просто ответил, но удалил их ответ. Решение было:

#utilitynav a i {text-decoration:none;}

Спасибо, человек тайны!

Ответ 5

Если вы не можете добавить элемент span (предположим, что у вас есть только привязка к CSS), он должен работать с float:left or right в вашем элементе значка.

Смотрите: Подчеркнутые CSS-ссылки подчеркнуты (для параметра "a" установлено значение "block" )

Ответ 6

http://jsfiddle.net/ZZEQd/2/

Просто добавьте тег span в свой HTML, и вам все равно.

HTML:

    <a href="#" title="Feedback" id="feedbacktogglenav">
       <span class="linkHover">Feedback</span>
       <i class="icon-comment"></i>
    </a>

CSS

a {
    text-decoration:none;
}
.linkHover:hover{
    text-decoration: underline;
}
#utilitynav .icon-comment {
    font-size: 12px;
    margin-left: 3px;
    position: absolute;
    top: 2px;
}
#utilitynav .icon-comment:hover {
    text-decoration:none;
}
#utilitynav #feedbacktogglenav {
    margin-right: 12px;
}

Я добавил класс в ваш диапазон, так как это не повлияет на будущие теги span

Ответ 7

Если у вас есть ситуация, когда вы не можете использовать :before или :after (потому что конкретный значок задается содержимым, а не глобальным стилем, например), и вы также не хотите входить и ставить <span> вокруг текста ссылки повсюду... еще один вариант - поместить отступ на ссылку и расположить иконку поверх отступа.

HTML

    <a href="#">Feedback <i class="icon-comment fas fa-link"></i></a>

CSS

    a {
      position: relative;
      text-decoration:none;
      padding-left: 20px;
    }

    a:hover {
        text-decoration:underline;
    }

    a i {
      position: absolute;
      left: 0;
    }

JSFiddle: http://jsfiddle.net/w6bL5m8k/1/

Я уверен, что, вероятно, существуют всевозможные особые условия, при которых это не сработает... но для простых ситуаций это должно быть хорошо.