CSS text-indent - удалить текст, но не добавленный контент, используя:after

Question

Я использую ползунок, который не могу изменить текст навигации (следующий / предыдущий), но я хотел бы заменить текст стрелкой

Я добавил стрелки со следующим 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";
}

Если я добавлю следующий CSS, стрелка и текст исчезнут

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

Я хочу сохранить стрелку, но удалить текст, это возможно?

HTML-структура для навигации:

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

Answer 1

По умолчанию псевдоэлементом являются inline элемент и следовать text-indent, Если вы сделаете это, float или block boxe, это останется в поле зрения. Тогда вам все еще нужно сбросить на него text-indent в 0;это может быть тогда:

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

Answer 2

Вы можете попробовать что-то вроде этого: 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;
}