Скажем, у меня есть следующая разметка:
<li><a href="somehwere">Link text</a></li>
Если у меня есть фоновое изображение на теге, как бы скрыть текст ссылки, используя только css? font-size: 0, кажется, отлично работает на теге, кроме того, что показано в маленьком блоге.
Спасибо
Попробуйте
a{
line-height: 0;
font-size: 0;
color: transparent;
}
color: transparent; охватывает проблему с браузерами Webkit, все еще отображающими 1px текста.
Оберните текст в диапазон и установите visibility:hidden; Скрытность видимости скроет элемент, но все равно будет занимать одно и то же место на странице (наоборот, отображение: ни один не удаляет его со страницы).
a { text-indent:-9999px; }
С успехом работает хорошо.
Mini tip:
У меня был следующий сценарий:
<a href="/page/">My link text
:after
</a>
Я скрыл текст с размером шрифта: 0, поэтому я мог использовать значок FontAwesome для него. Это работало на Chrome 36, Firefox 31 и IE9 +.
Я бы не рекомендовал цвет: прозрачный, потому что текстовый стиль существует и доступен для выбора. Использование line-height: 0px не позволяло мне использовать: после. Может быть, потому что мой элемент был встроенным блоком.
Видимость: скрытая. Не разрешала использовать: после.
text-indent: -9999px;: также перемещен элемент: after
text-indent :-9999px
Работает безупречно.
Я следовал наилучшему ответу Loktar, и он работал очень хорошо. Единственная проблема, с которой я столкнулся, - это Chrome (моя текущая версия - 27.0.1453.94 м). Проблема заключалась в том, что, похоже, Chrome знает, что текст в ссылке не виден, и он помещает ссылку немного ниже, чем она должна быть (что-то вроде margin-top, но изменить ее невозможно). Это происходит со всеми способами, в которых мы делаем текст невидимым: - line-height: 0; - font-size: 0; - текст-отступ: -9999px;
Я смог исправить эту проблему, установив вертикальное выравнивание ссылки следующим образом:
vertical-align: 25px;
Я надеюсь, что это полезно
Другой вариант - скрыть на основе класса "только sr-only" bootstraps. Если вы переносите текст в промежутке с классом "sr-only", текст не будет отображаться, но для чтения с экрана все равно будет доступ к нему. Таким образом, у вас будет:
<li><a href="somehwere"><span class="sr-only">Link text</span></a></li>
Если вы не используете bootstrap, сохраните выше, но также добавьте ниже css для определения класса sr-only:
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
Просто добавьте font-size: 0; к элементу, содержащему текст.
Это хорошо работает.
Я смог исправить эту проблему, установив font-size: 0.
Как насчет display: none;
Это что-то скрывает.