title: show pseudo element but not parent element
body: <p>Hi I have a list item containing text like this:</p>
  
  <pre><code>&lt;li&gt;Search&lt;/li&gt;
  </code></pre>
  
  <p>and I want to display an icon using font awesome</p>
  
  <pre><code>li:before {
    content: "\f002";
  }
  </code></pre>
  
  <p>I don't have the ability to just remove the "Search" text (it is being generated from a Drupal CMS, as is the markup and class names), but I want to hide the Search text, but show the pseudo element (the search icon). How do I do this? Normally what I would do to hide the text is just go:</p>
  
  <pre><code>li {
    text-indent: -1000px;
    overflow: hidden;
  }
  </code></pre>
  
  <p>but that will hide the pseudo element as well</p>