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

css, text-indent

Solution

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;
}

Problem

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> ```

Original source