Як приховати текст прив’язки, не приховуючи прив’язку?

Скажімо, у мене є така розмітка:

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

Якщо на тезі у мене є фонове зображення, як я можу приховати текст посилання, використовуючи лише css? font-size: 0, здається, чудово працює на тезі, крім того, як показано в маленьких крапельках ie7.

• Дякую за допомогу дотепер я використовував line-height: 0;і font-size: 0;та text-indent: -999px. Але це все одно відображає деякі краплі в сафарі, будь-які ідеї?

Спробуйте

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

Висвітлено color: transparent;проблему з браузерами Webkit, які все ще відображають 1 пікс. Тексту.

Оберніть текст у певний проміжок і встановіть « visibility:hidden;Видимість прихована» приховає елемент, але він все одно займе той самий простір на сторінці (навпаки, відображення: ніхто також не видаляє його зі сторінки).

a { text-indent:-9999px; }

Як правило, добре працює від мого досвіду.

Міні-підказка:

У мене був такий сценарій:

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

Я приховав текст із розміром шрифту: 0, щоб я міг використовувати для нього піктограму FontAwesome. Це працювало на Chrome 36, Firefox 31 та IE9 +.

Я б не рекомендував колір: прозорий, оскільки текст ще існує і його можна вибрати. Використання line-height: 0px не дозволило мені використовувати: after. Може тому, що моїм елементом був вбудований блок.

Видимість: прихована : Не дозволила мені використовувати: після.

відступ тексту: -9999px; : Також переміщено елемент: after

text-indent :-9999px 

Працює бездоганно.

Інший варіант - приховати на основі завантажувальних стріпсів класу "лише для sr". Якщо ви обернете текст у певний проміжок класом "лише для sr", тоді текст не відображатиметься, але зчитувачі з екрана все одно матимуть до нього доступ. Отже, ви мали б:

<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; }

Я наслідував найкращу відповідь Локтара, і це спрацювало дуже добре. Єдина проблема була у мене з Chrome (моя поточна версія - 27.0.1453.94 м). Проблема у мене полягала в тому, що, здається, Chrome усвідомлює, що текст у посиланні не видно, і посилання ставиться трохи нижче, ніж передбачається (щось на зразок margin-top, але змінити його неможливо ). Це відбувається з усіма способами, якими ми робимо текст невидимим: - line-height: 0; - розмір шрифту: 0; - відступ тексту: -9999px;

Я зміг вирішити цю проблему, відрегулювавши вертикальне вирівнювання посилання таким чином:

vertical-align: 25px;

Сподіваюся, це корисно

Просто потрібно додати font-size: 0;до вашого елементу, що містить текст. Це добре працює.

Ви можете помістити зображення в :: before псевдоелемент і встановити ті самі розміри, що і зображення + додати переповнення: приховане, як:

li a::before{
  content:url('img');
  width:20px;
  height:10px
}

a {
  overflow:hidden;
  width:20px;
  height:10px
}

Я зміг вирішити цю проблему, встановивши розмір шрифту: 0 .

Як щодо display: none;

Це все ховає.