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

Question

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

когда 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/

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

9

css css3

автор: Control Freak

6 ответов

автор: Chamika Sandamal · Accepted Answer · 2014-09-10 10:02:37

попробуйте следовать css,

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

демо

автор: Karlen Kishmiryan · Accepted Answer · 2014-09-10 10:02:50

установить display собственность i to inline-block:

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

JSFiddle

автор: Lorenzo Meriggi · Accepted Answer · 2016-08-18 09:29:49

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

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

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

автор: Richa · Accepted Answer · 2014-09-10 10:01:10

просто добавить display:inline-block;

СКРИПКА ДЕМО

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

автор: Bir · Accepted Answer · 2014-09-10 10:09:36

вы также можете написать вам HTML, как

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

и CSS как

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

автор: Frank Nocke · Accepted Answer · 2017-12-21 16:21:06

у меня есть две вещи, чтобы добавить здесь...

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

  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) настройки текстового оформления один раз снова на этом внутреннем элементе помогает...