show pseudo element but not parent element

Question

Hi I have a list item containing text like this:

<li>Search</li>

and I want to display an icon using font awesome

li:before {
  content: "\f002";
}

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:

li {
  text-indent: -1000px;
  overflow: hidden;
}

but that will hide the pseudo element as well

Answer 1

A bit late to the party, but you could always change the font-size of the li to 0, and change the font-size of the icon back to the original font-size. Like this:

li {
    font-size: 0;
}

li:after {
    font-size: 1em;
}

Answer 2

You can stick to the "text-indent" method (or better the "Kellum Method") and use CSS positioning for the pseudo element:

li {
display:block;
position:relative;
text-indent: -100%;
white-space: nowrap;
overflow: hidden;
}
li:after {
content: "visible pseudo-element";
position:absolute;
right:0;
}

http://jsfiddle.net/Fiddel/aopteq8m/