视觉隐藏内容但不隐藏伪内容

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。

Answer 2

您应该将内部文本包装在一个范围内并隐藏它以确保。但如果你不能这样做那么你可以尝试

font-size: 0