可视隐藏内容，但不隐藏伪内容

Question

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

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

如何在不隐藏.icon伪内容的情况下直观地隐藏辅助文本？无论是辅助文本还是它所占据的空间都不应该被看到，因此这些图标可以内联使用。当.is-content-visually-hidden被关闭时，文本应该是可见的。我尝试了各种技术，如text-indent: -9999px，但都没有效果。

这个代码演示了这个问题。。

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。

Answer 2

您应该将内部文本封装在一个跨度中，并将其隐藏起来以确保。但如果你不能做到那你就可以试试

font-size: 0