Ответ 1
Как псевдоэлемент :before
отображается как поле потомка (точнее, непосредственно перед первым дочерним контентом) его генерирующий элемент, он подчиняется тем же правилам, что и его нормальные ячейки потомков относительно text-decoration
:
Свойство "text-decoration" для элементов-потомков не может влиять на декорирование предка.
См. ответы для получения более подробной информации:
- Свойство text-decoration CSS не может быть переопределено дочерним элементом
- Как мне заставить переопределить CSS-оформление CSS?
В этом нет хорошего пути... единственными альтернативами, которые сразу приходят в голову, являются:
-
Оберните текст в свой собственный элемент
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); }