Visually hide content but not pseudo content

Question

I'm using a pattern like this to add icons via :before or :after pseudo content:

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

How can I visually hide the assistive text without hiding .icon pseudo content? Neither the assistive text or the space it occupies should be seen at all, such that these icons can be used inline. When.is-content-visually-hidden is toggled off then the text should be visible. I tried various techniques such as text-indent: -9999px to no avail.

This codepen demonstrates the problem.

Answer 1

The simple approach is to set inner text's font-size to 0 and then reset pseudo-element font to normal again to make it visible:

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

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

Demo: http://codepen.io/anon/pen/zxWQRX

However more flexible approach is to wrap text into one more span:

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

and hide span only.

Answer 2

You should wrap the inner text in a span and hide that to be sure. But if you are not able to do that then you could try

font-size: 0