Parent replacement with text-indent

I'm trying to apply the text-indent technique (show pseudo element but not parent element) to hide the text into the parent container and just show the added content into a pseudo-element.

The markup I have is something like:

<a href="" class="icon">@</a>

but it could also have not exclusively text inside:

<a href="" class="icon"><img src="pic.jpg" /></a>

<a href="" class="icon"><div>Some text in a block with its own <element>, <img src="img.jpg" /> or CSS styling</div></a>

And then the CSS:

.icon {
    position: relative !important;
    overflow: hidden !important;
    text-indent: -100% !important;
    white-space: nowrap !important;
}

.icon:before {
    position: absolute;
    right: 0;
    content: "\xe000";
}

(the !important clause is there cause the icon should have priority on whatever is inside the element content.)

The problem are that:

• the container moves, but is still visible, while I want to hide it completely.
• changing text-indent changes for both the container AND the pseudo-element.

I am testing on Firefox 39.0.

What do I miss?

PS - I obviously don't want to just change the color of the text into the container to hide it.

via Chebli Mohamed