css – 直观地隐藏内容但不隐藏伪内容

我正在使用这样的模式通过以下方式添加图标：before或：after pseudo content：

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

如何在不隐藏.icon伪内容的情况下直观地隐藏辅助文本？无论是辅助文本还是它所占据的空间都不应该被看到,这样这些图标就可以内联使用.当关闭内容 – 视觉隐藏时,文本应该是可见的.我尝试了各种技术,如text-indent：-9999px无济于事.

This codepen demonstrates the problem.

解决方法

简单的方法是将内部文本的font-size设置为0,然后再次将伪元素字体重置为normal以使其可见：

.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>

并隐藏跨度.