Как я могу скрыть якорный текст, не скрывая якорь

Скажем, у меня есть следующая разметка:

<li><a href="somehwere">Link text</a></li>

Если у меня есть фоновое изображение на теге, как бы скрыть текст ссылки, используя только css? font-size: 0, кажется, отлично работает на теге, кроме того, что показано в маленьком блоге.

Спасибо

  • Спасибо за помощь до сих пор iv использовали line-height: 0; и font-size: 0; и text-indent: -999px; но он все еще показывает некоторые капли в сафари, любые идеи?

Ответы

Ответ 1

Попробуйте

 a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }


color: transparent; охватывает проблему с браузерами Webkit, все еще отображающими 1px текста.

Ответ 2

Оберните текст в диапазон и установите visibility:hidden; Скрытность видимости скроет элемент, но все равно будет занимать одно и то же место на странице (наоборот, отображение: ни один не удаляет его со страницы).

Ответ 3

a { text-indent:-9999px; }

С успехом работает хорошо.

Ответ 4

Mini tip:

У меня был следующий сценарий:

<a href="/page/">My link text
:after
</a>

Я скрыл текст с размером шрифта: 0, поэтому я мог использовать значок FontAwesome для него. Это работало на Chrome 36, Firefox 31 и IE9 +.

Я бы не рекомендовал цвет: прозрачный, потому что текстовый стиль существует и доступен для выбора. Использование line-height: 0px не позволяло мне использовать: после. Может быть, потому что мой элемент был встроенным блоком.

Видимость: скрытая. Не разрешала использовать: после.

text-indent: -9999px;: также перемещен элемент: after

Ответ 5

text-indent :-9999px

Работает безупречно.

Ответ 6

Я следовал наилучшему ответу Loktar, и он работал очень хорошо. Единственная проблема, с которой я столкнулся, - это Chrome (моя текущая версия - 27.0.1453.94 м). Проблема заключалась в том, что, похоже, Chrome знает, что текст в ссылке не виден, и он помещает ссылку немного ниже, чем она должна быть (что-то вроде margin-top, но изменить ее невозможно). Это происходит со всеми способами, в которых мы делаем текст невидимым: - line-height: 0; - font-size: 0; - текст-отступ: -9999px;

Я смог исправить эту проблему, установив вертикальное выравнивание ссылки следующим образом:

vertical-align: 25px;

Я надеюсь, что это полезно

Ответ 7

Другой вариант - скрыть на основе класса "только 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; }

Ответ 8

Просто добавьте font-size: 0; к элементу, содержащему текст. Это хорошо работает.

Ответ 9

Я смог исправить эту проблему, установив font-size: 0.

Ответ 10

Как насчет display: none;

Это что-то скрывает.