隐藏 link 的文本

Question

我想为我的主页使用一个很棒的字体图标 link。

用这个 css;

#menu-item-47 a::before {
 content: "\f017";
 font-family: fontawesome;
 font-size: 18px;
 color: #333;
}

一切都很好，但当事情得到响应时，我希望 link 文本 "home" 出现。如何在不隐藏图标的情况下隐藏 link 文本？

我可以使用 width: 15px; overflow: hidden 但这似乎不太优雅。

Answer 1

最好的方法是在您的元素上使用 visibility: hidden;，在之前的元素上使用 visibility: visible;。

div {
  visibility: hidden;
}

div:before {
  visibility: visible;
}

如果您不关心您的 div 在隐藏后仍然占用 space，这个解决方案应该可以正常工作。

Hiding the text of a link