:hover:before text-decoration none не имеет эффектов?

В качестве заголовка я добавляю значки, используя .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;
}

css css-selectors pseudo-element
person gremo    schedule 13.07.2012    source источник
comment
Вы не можете сделать это с псевдоэлементами. Вам придется использовать JS.   -  person Bojangles    schedule 13.07.2012
comment
Да, вы не можете удвоить такие псевдоэлементы и псевдоклассы без js. Я бы предложил использовать javascript для обработки :before, а не для обработки :hover. Это потому, что :before поддерживается не всеми браузерами. Но это только мои 2 цента..   -  person BumbleB2na    schedule 13.07.2012
comment
@BumbleB2na по крайней мере IE8+, FF10.0.2+, Opera 11.61+, Safari 5.1.2+, Chrome 17 quirksmode.org/css/contents.html   -  person gremo    schedule 13.07.2012
comment
@BumbleB2na: Вы можете - псевдоэлемент просто должен быть последним в селекторе.   -  person BoltClock    schedule 14.07.2012
comment
Я заметил некоторые опечатки в селекторах классов и атрибутов, но не то, чтобы они имели отношение к рассматриваемой проблеме. Примечательно, что ваши селекторы атрибутов icon-large можно просто изменить на .icon-large:before (но я предполагаю, что у вас есть это только как отдельный класс, а не как префикс для других классов).   -  person BoltClock    schedule 14.07.2012

Ответы (5)


arrow_upward
30
arrow_downward

Поскольку псевдоэлемент :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);
}
person BoltClock    schedule 14.07.2012
comment
Действительно спасибо за ваше время и ваше большое объяснение. Я выберу дополнительное решение для разметки. - person gremo; 14.07.2012
comment
См. Ниже более свежий и актуальный ответ. - person Jay; 09.02.2019

arrow_upward
46
arrow_downward

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

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

Вот СКРИПКА JS:

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

person Pinoy2015    schedule 14.05.2014
comment
Большое спасибо за этот трюк. Никогда бы не додумался добавить. - person Matt.; 20.11.2014
comment
@acme, посмотрите последнюю версию jsfiddler для поддержки IE. Протестировано в IE9 jsfiddle.net/73p2k/18. - person Pinoy2015; 10.12.2014
comment
Так что для IE вы должны установить text-decoration:underline; на a:before И text-decoration:none; на a:hover:before. Похоже, это ошибка. Спасибо Пиной2015! - person Philipp Michael; 11.11.2016
comment
Что?? Это действительно сработало... и только для встроенного блока... Можете ли вы объяснить, почему он ведет себя именно так, и как вы пришли к такому выводу? - person Alexandr; 01.04.2020
comment
В моем случае это было фактическим решением. - person Marco Cazzaro; 14.05.2021

arrow_upward
4
arrow_downward

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

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

person Doug Stephen    schedule 13.07.2012
comment
Это действительно... заголовок неверный, вопрос правильный. Собираюсь исправить. - person gremo; 13.07.2012

arrow_upward
4
arrow_downward

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

person user123321    schedule 14.11.2012

arrow_upward
2
arrow_downward

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

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

person skip405    schedule 13.07.2012