css - 视觉上隐藏内容而不是伪内容

Question

我正在使用这样的模式通过 :before 或 :after 伪内容添加图标:

<span class="icon icon__example is-content-visually-hidden">assistive text</span>

如何在不隐藏 .icon 伪内容的情况下直观地隐藏辅助文本？根本不应该看到辅助文本或它占用的空间，以便可以内联使用这些图标。当.is-content-visually-hidden 关闭时，文本应该是可见的。我尝试了各种技术，例如 text-indent: -9999px 无济于事。

This codepen demonstrates the problem .

Answer 1

简单的做法是将内部文本的font-size设置为0，然后重新将伪元素字体设置为正常，使其可见:

.is-content-visually-hidden {
  font-size: 0;
}

.icon__star::before {
  content: "*";
  font-size: 32px;
}

演示: http://codepen.io/anon/pen/zxWQRX

然而，更灵活的方法是将文本包装到另一个范围内:

<i class="icon icon__star is-content-visually-hidden">
  <span>star</span>
</i>

并仅隐藏span。