CSS文本-缩进-删除文本，但不删除使用:after添加的内容
CSS文本-缩进-删除文本，但不删除使用:after添加的内容
提问于 2014-05-25 06:09:36
我使用的滑块不能修改导航文本(下一个/上一个)，但我想用箭头替换文本
我添加了带有以下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;
}我想保留箭头但删除文本，这是可能的吗？
导航的THe超文本标记语言结构是：
<ul class="hero-carousel-nav">
<li class="prev">
<a href="#">
Previous
</a>
</li>
</ul>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-05-25 06:16:28
默认情况下，伪元素是inline元素，并且遵循text-indent。如果你创建了它，无论是float还是block盒子，它都会留在你的视线中。然后，您仍然需要重置为it text-indent to 0; it can be：
#carousel .hero-carousel-nav .next:after {
font-family: "Glyphicons Halflings";
color:#FFF;
content: "\e080";
float:left;/* or display:block */
text-indent:0;
}Stack Overflow用户
发布于 2014-05-25 06:15:32
您可以尝试如下所示：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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23850129
复制相关文章
相似问题
腾讯云开发者
