Удалить подчеркивание только из дочернего элемента привязки

Когда тег a содержит дочерние элементы, такие как тег i, он все еще применяет подчеркивание к нему при наведении, и мне интересно, как удалить подчеркивание только с тега i, когда кто-то парит над тегом a.

CSS, с которым я работаю:

a{
    display:block;
    text-decoration:none;
}
a i{
  color:#888;
  margin-left:5px;
}
a:hover{
    text-decoration:underline;
}
a:hover i{
    text-decoration:none !important;
}

Вот скрипка, чтобы объяснить: http://jsfiddle.net/kkz66x2q/

Я просто хочу, чтобы подчеркивание было GONE только в элементе i, когда вы наводите курсор на ссылку.

Ответы

Ответ 1

Попробуйте выполнить css,

a:hover i{
    display: inline-block; <-- this is the trick
    text-decoration:none !important;
}

Демо

Ответ 2

Задайте для свойства display значение i: inline-block:

a i {
    ...
    display: inline-block;
}

JSFiddle

Ответ 3

У меня была такая же проблема и исправлено это с помощью следующего правила css:

a:-webkit-any-link {text-decoration:none}

надеюсь, что это поможет!

Ответ 4

Просто добавьте display:inline-block;

FIDDLE DEMO

a:hover i {
    display:inline-block;
    text-decoration:none !important;
}

Ответ 5

Вы также можете написать HTML-код, например

    <a href="#">Link</a><i>(2)</i>

и CSS, например

  a{
    display:inline-block;
    text-decoration:none;
  }

Ответ 6

Мне нужно добавить две вещи...

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

  code
    font-family: Courier New, Courier, monospace
    color: green
    background: rgba( white, .2 )
    padding: 2px 4px
    text-decoration: none

  a code
    display: inline-block
    line-height: normal
    text-decoration: underline

Вы должны добавить line-height: normal в компенсацию для встроенного блока, иначе вы будете использовать разные прокладки на связанных элементах, чем на других. (т.е. ваша высота линии легко начнет выглядеть несовместимой)
И необязательно: если вы были просто раздражены, то подчеркивание имеет другой цвет (т.е. цвет внешней ссылки, а не зеленый code) снова устанавливает текст-украшение на том внутреннем элементе, который помогает...

Ответ 7

Я столкнулся с той же проблемой.

Но я хотел, чтобы внутренний элемент был правым, так что настройка только float: right работала нормально.

a {
    display: block;
    overflow: hidden; // Clearfix
    text-decoration: none;
}
a .right-none-underline-element { float: right }

Для справки.