5

ナビゲーション テキスト (次/前) を変更できないスライダーを使用していますが、テキストを矢印に置き換えたいです。

次の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>
4

2 に答える 2

12

デフォルトでは、疑似要素はinlineelement と followtext-indentです。あなたがそれを作った場合、floatまたはblockboxe 、それはビューに残ります。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;
}
于 2014-05-24T22:16:27.863 に答える
5

次のようなものを試すことができます: 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;
}
于 2014-05-24T22:15:32.350 に答える