在css伪中添加google材料设计图标:在内容之后

Question

我只是想在悬停时添加一些googles材料设计图标到链接的内容:

a:hover::after {
    content: "<i class="material-icons">link</i>"
}

但它不起作用,请看我的小提琴.

Answer 1

将CSS更改为:

a:hover::after {
  font-family: 'Material Icons';
  content: "link";
  -webkit-font-feature-settings: 'liga';
}

所以你可以改变 content: "[whatever icon here]";

小提琴

小提琴没有正确加载图标字体所以我把链接放在html中.

Answer 2

C.Schubert 几乎已经给出了他们的答案，但是如果您还想获得 IE10+ 支持，则需要添加font-feature-settings: 'liga' 1;因此完成的样式将如下所示...

a:hover::after {
  font-family: 'Material Icons';
  content: "link";
  -webkit-font-feature-settings: 'liga' 1;
  -moz-font-feature-settings: 'liga' 1;
  font-feature-settings: 'liga' 1;
}

就像 C.Schubert 所说的那样content: "[whatever icon here]";，将更改为您想要的图标。