Visually hide content but not pseudo content

css

Solution

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.

Problem

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.

Original source