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

通过defaut，伪元素是inline元素并遵循text-indent。如果您使用float或block框，则会保留在视图中。然后，您仍然需要重置为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;
}

CSS text-indent - 删除文本但不使用以下内容添加内容：after

2 个答案: