: hover: перед текстом-декорированием нет эффекта?

Как заголовок, я добавляю значки, используя .icon-*. При добавлении значка в гиперссылку:

<a href="#" class="icon-email icon-large">Email me!</a>

Содержимое, вставленное в свойство content, отображает подчеркивание text-decoration при наведении. Я бы хотел отключить text-decoration только для содержимого до:

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'IcoMoon';
    font-style: normal;
    speak: none;
}
.icon-mail:before {
    content: "\37";
}
[class^="icon-large-"]:before, [class*=" icon-large"]:before {
    font-size: 48px;
    line-height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
    margin-right: 5px;
    vertical-align: middle;
}

Я пробовал это, но он не работает (украшение все еще видно):

a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before {
    text-decoration: none;
    color: white;
}

Ответ 1

Как псевдоэлемент :before отображается как поле потомка (точнее, непосредственно перед первым дочерним контентом) его генерирующий элемент, он подчиняется тем же правилам, что и его нормальные ячейки потомков относительно text-decoration:

Свойство "text-decoration" для элементов-потомков не может влиять на декорирование предка.

См. ответы для получения более подробной информации:

В этом нет хорошего пути... единственными альтернативами, которые сразу приходят в голову, являются:

Оберните текст в свой собственный элемент span, а затем примените text-decoration к этому span, как показано skip405. Недостатком является, конечно, дополнительная разметка.
Используйте встроенное фоновое изображение вместо встроенного текста в шрифт значка с псевдоэлементом :before (я также исправил несоответствия с помощью селекторов классов):
```
[class^="icon-"]:before, [class*=" icon-"]:before {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    content: "";
}
.icon-email:before {
    background-image: url(icon-mail.svg);
    background-repeat: no-repeat;
}
.icon-large:before {
    width: 48px;
    height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
    margin-right: 5px;
    vertical-align: middle;
}
```
Преимущество этого решения по сравнению с решением skip405 заключается в том, что вам не нужно изменять HTML, но учитывая, что он использует векторные изображения SVG и background-size, он не будет работать в IE8.

Если вам нужна поддержка IE8, вам нужно вернуться к растровым изображениям:
```
.icon-email:before {
    background-image: url(icon-mail.png);
}
.icon-email.icon-large:before {
    background-image: url(icon-mail-large.png);
}
```

Ответ 2

Вставить дисплей: встроенный блок; в вашем css. Что-то вроде ниже:

.icon-mail:before {
    content: "\37";
    display:inline-block;
    text-decoration:none;
}

Вот JID FIDDLE:

http://jsfiddle.net/73p2k/18/

Ответ 3

Вы можете установить высоту и переполнение: скрытые для: перед элементом, а текстовое оформление не будет видно:)

Ответ 4

Селектор псевдоэлементов должен быть последним элементом в цепочке выбора.

Вы можете применить стиль к element:hover:before, но не к element:before:hover.

Ответ 5

Пробовал некоторые вещи, используя только тег a в качестве разметки, но, увы. Возможным обходным путем для вас может быть внутренняя упаковка ссылки в другом элементе, например span. Таким образом, вы можете иметь подчеркивание этого элемента (вместо псевдоэлемента), который отлично контролируется css.

Здесь показан живой пример: http://jsfiddle.net/skip405/fQHUH/