html - 在 css 伪 :after content 中添加谷歌 Material 设计图标

Question

我只是想添加一些谷歌 Material 设计 icons到悬停链接的内容:

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

但是不行，请看我的fiddle .

Answer 1

将您的 CSS 更改为:

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

所以你可以改变内容:“[whatever icon here]”;

FIDDLE

此外， fiddle 没有正确加载图标字体，所以我将链接放在 html 中。