: hover: до оформления текста никто не имеет никаких эффектов?

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

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

Содержание вставленоcontent свойство показывает подчеркнутое текстовое оформление при наведении курсора. Я хочу отключить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;
}
 BoltClock♦14 июл. 2012 г., 06:35
@ BumbleB2na: Вы можете - псевдоэлемент просто должен быть последним в селекторе.
 gremo13 июл. 2012 г., 18:57
@ BumbleB2na как минимум IE8 +, FF10.0.2 +, Opera 11.61+, Safari 5.1.2+, Chrome 17quirksmode.org/css/contents.html
 Bojangles13 июл. 2012 г., 18:47
Вы не можете сделать это с псевдоэлементами. Вы собираетесь использовать JS.
 BoltClock♦14 июл. 2012 г., 06:39
Я заметил некоторые опечатки в селекторах классов и атрибутов, но они не относятся к рассматриваемой проблеме. Примечательно, что вашicon-large селекторы атрибутов могут быть просто изменены на.icon-large:before (но я предполагаю, что вы имеете это только как отдельный класс, а не как префикс для других классов).
 BumbleB2na13 июл. 2012 г., 18:47
Да, вы не можете удвоить псевдоэлементы и псевдоклассы как это без js. Я бы предложил использовать javascript для обработки: before, а не для обработки: hover. Это потому что: before не поддерживается всеми браузерами. Но это только мои 2 цента ..

Ответы на вопрос(5)

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

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

Живой пример здесь:http://jsfiddle.net/skip405/fQHUH/

Решение Вопроса

:before pseudo-element is rendered as a descendant box (более конкретно, непосредственно перед первым дочерним блоком содержимого) своего генерирующего элемента, он подчиняетсяте же правила, что и обычные блоки-потомки в отношенииtext-decoration:

The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.

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

CSS text-decoration property cannot be overridden by child element How do I get this CSS text-decoration override to work?

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

Wrap the text in its own span element, then apply text-decoration to that span, as shown by skip405. The disadvantage is, of course, extra markup.

Use an inline block background image instead of inline text in an icon font with your :before pseudo-element (I've also corrected the inconsistencies with your class selectors):

[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;
}

The advantage this has over skip405's solution is that you don't have to modify the HTML, but given that it uses SVG vector background images and background-size, it won't work in IE8.

If you do need IE8 support, then you have to fall back to bitmap images:

.icon-email:before {
    background-image: url(icon-mail.png);
}
.icon-email.icon-large:before {
    background-image: url(icon-mail-large.png);
}
 gremo14 июл. 2012 г., 12:32
На самом деле, спасибо за ваше время и ваши отличные объяснения. Я пойду к дополнительному решению для разметки.
 09 февр. 2019 г., 02:02
Ниже приведен более свежий и актуальный ответ.

в вашем css. Нечто похожее на приведенное ниже:

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

Вот JS FIDDLE:

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

 11 нояб. 2016 г., 10:34
Так что для IE вы должны установитьtext-decoration:underline; вa:before А ТАКЖЕtext-decoration:none; вa:hover:before, Кажется, этоbug, Thx Pinoy2015!
 25 июн. 2014 г., 16:39
Не работает в IE, к сожалению.
 10 дек. 2014 г., 11:10
@acme, пожалуйста, смотрите последнюю версию jsfiddler для поддержки IE. Протестировано в IE9jsfiddle.net/73p2k/18
 19 нояб. 2014 г., 22:01
Большое спасибо за этот трюк. Никогда бы не подумал добавить его.

ра.

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

 gremo13 июл. 2012 г., 19:00
Это действительно ... название неправильное, вопрос правильный. Собираюсь это исправить.

Ваш ответ на вопрос