CSS скрыть текст, но показать изображение?

Question

Мне нужно что-то изменить, не касаясь HTML-кодов.

Так что у меня есть этот код в моем HTML

                        <span class="share"> 
                            <ul>
                                <li>Share &nbsp;&nbsp;</li>
                                <li class="twitter"><a href="#">twitter</a></li>
                                <li class="facebook"><a href="#">facebook</a></li>
                                <li class="delicious"><a href="#">delicious</a></li>
                                <li class="friendfeed"><a href="#">friendfeed</a></li>
                                <li class="addthis"><a href="#">share</a></li>
                                <div class="clear"></div>
                            </ul>
                        </span>

и это в CSS

            .twitter {background:url('../images/tt.png') no-repeat; width:10px; height:14px; }

Это прекрасно работает, но текст твиттера виден под логотипом твиттера, я не хочу, чтобы эти тексты появлялись в моем списке, я хочу заменить их изображениями в CSS.

Можно ли обойтись, не касаясь HTML-кодов?

Answer 1

Сделайте текст прозрачным. Поскольку это ссылка, вам нужно использовать несколько селекторов, чтобы убедиться, что все случаи рассмотрены:

.twitter a, .twitter a:link, .twitter a:visited
{
    color: transparent;
}

Редактировать: этот другой вариант, хотя и более подробный, имеет преимущество, заключающееся в том, что граница фокуса (маленькие точки, которые появляются при выборе ссылки) соответствует размеру и форме значка Twitter. Кроме того, текст не будет раскрыт, если он выделен, скопирован и вставлен. Это становится невидимым и невыбираемым. Вот техника:

.twitter a {
    display: inline-block;
    overflow: hidden;
    width: 0;
    height: 14px;
    padding-left: 10px;
}

Answer 2

Вы могли бы использовать text-indent:

text-indent: -9999px; /* get rid of any text */

Answer 3

Попробуйте сделать свой font-size : 0px; в вашем css.

Answer 4

Используйте текстовый отступ с небольшим количеством магии в нем:)

HTML:

           <span class="share"> 
                <ul>
                    <li>Share &nbsp;&nbsp;</li>
                    <li class="twitter"><a href="#" class="twitter">twitter</a></li>
                    <li class="facebook"><a href="#">facebook</a></li>
                    <li class="delicious"><a href="#">delicious</a></li>
                    <li class="friendfeed"><a href="#">friendfeed</a></li>
                    <li class="addthis"><a href="#">share</a></li>
                    <div class="clear"></div>
                </ul>
            </span>

CSS:

a.twitter {
    background-image:url('../images/tt.png');
    display:block;
    height:58px;
    text-indent:-9999px;
    width:200px;
}

Итак, вы видите текст с отступом, но изображение по-прежнему кликабельно, потому что я поместил класс в ссылку твиттера;)

Answer 5

Возможно, я неправильно понял ваш вопрос. Но вы хотите скрыть текст. Я хотел бы использовать JQuery, однако помните, что ваш <a> потеряет массу.

<script>
    $('.twitter a').html('');
</script>