CSS text-indent - remove text but not content added using :after

Question

I am using a slider that I can't modify the navigation text (next / previous) but I would like to replace the text with an arrow

I have added the arrows with the following css:

#carousel .hero-carousel-nav .prev a:after {
 font-family: "Glyphicons Halflings";
 color:#FFF;
 content: "\e079";
}
#carousel .hero-carousel-nav .next:after {
 font-family: "Glyphicons Halflings";
 color:#FFF;
 content: "\e080";
}

If I add the following CSS the arrow and text disappears

#carousel .hero-carousel-nav .prev a {
 text-indent:-9999px;
}

I want to keep the arrow but remove the text, is this possible?

THe HTML structure for the navigation is:

<ul class="hero-carousel-nav">
    <li class="prev">
        <a href="#">
          Previous
        </a>
    </li>
</ul>

Chitchat

make your pseudo float and reset text-indent to 0; – Squab

Answer 1

By defaut, pseudo element are inline element and follow text-indent. If you make it, float or a block boxe , it will stay in view. Then you still need to reset to it text-indent to 0; it can be then :

#carousel .hero-carousel-nav .next:after {
 font-family: "Glyphicons Halflings";
 color:#FFF;
 content: "\e080";
float:left;/* or display:block */
text-indent:0;
}

Squab

Answer 2

You can try something like this: http://jsfiddle.net/sandro_paganotti/HupTL/

div{
    position: relative;
    text-indent: -9000px;
}
div:after{
    content: 'hi!';
    display: block;
    position: absolute;
    text-indent: 0;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

Council