Wie verstecke ich Ankertext, ohne den Anker auszublenden?

Angenommen, ich habe das folgende Markup:

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

Wenn ich ein Hintergrundbild auf einem Tag habe, wie würde ich den Linktext nur mit CSS ausblenden? Schriftgröße: 0 scheint auf dem a-Tag gut zu funktionieren, abgesehen von der kleinen ie7-Show.

Vielen Dank

• Vielen Dank für Ihre Hilfe. Bisher habe ich die Zeilenhöhe verwendet: 0; und Schriftgröße: 0; und Texteinzug: -999px; aber es zeigt immer noch einige Blobs in Safari, irgendwelche Ideen?

Versuchen

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

Das color: transparent;behandelt ein Problem mit Webkit-Browsern, die immer noch 1 Pixel des Textes anzeigen.

Wenn Sie den Text in einen Bereich einschließen und die visibility:hidden;Sichtbarkeit ausblenden, wird das Element ausgeblendet, es nimmt jedoch immer noch denselben Platz auf der Seite ein (umgekehrt: Keine entfernt es auch von der Seite).

a { text-indent:-9999px; }

Neigt dazu, aus meiner Erfahrung heraus gut zu funktionieren.

Minitipp:

Ich hatte folgendes Szenario:

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

Ich habe den Text mit der Schriftgröße 0 ausgeblendet, damit ich ein FontAwesome-Symbol dafür verwenden kann. Dies funktionierte unter Chrome 36, Firefox 31 und IE9 +.

Ich würde Farbe nicht empfehlen: transparent, da der Text noch vorhanden und auswählbar ist. Mit der Zeilenhöhe: 0px konnte ich: after nicht verwenden. Vielleicht, weil mein Element ein Inline-Block war.

Sichtbarkeit: versteckt : Ich durfte: after nicht verwenden.

Texteinzug: -9999px; : Auch das Element: after wurde verschoben

text-indent :-9999px 

Funktioniert einwandfrei.

Eine andere Option ist das Ausblenden basierend auf der Bootstraps-Klasse "sr-only". Wenn Sie den Text in einen Bereich mit der Klasse "sr-only" einschließen, wird der Text nicht angezeigt, aber Bildschirmleser haben weiterhin Zugriff darauf. Sie hätten also:

<li><a href="somehwere"><span class="sr-only">Link text</span></a></li>

Wenn Sie kein Bootstrap verwenden, behalten Sie das oben Gesagte bei, fügen Sie aber auch das folgende CSS hinzu, um die "sr-only" -Klasse zu definieren:

.sr-only {position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0 0 0 0);  border: 0; }

Ich habe die beste Antwort von Loktar befolgt und es hat sehr gut funktioniert. Das einzige Problem, das ich hatte, war mit Chrome (meine aktuelle Version ist 27.0.1453.94 m). Das Problem, das ich hatte, war, dass Chrome anscheinend weiß, dass der Text im Link nicht sichtbar ist, und dass der Link etwas niedriger ist, als er sein sollte (so etwas wie Rand oben, aber es ist nicht möglich, ihn zu ändern ). Dies geschieht auf alle Arten, auf die wir den Text unsichtbar machen: - Zeilenhöhe: 0; - Schriftgröße: 0; - Texteinzug: -9999px;

Ich konnte dieses Problem beheben, indem ich die vertikale Ausrichtung des Links wie folgt anpasste:

vertical-align: 25px;

Ich hoffe das ist hilfreich

Sie müssen nur font-size: 0;zu Ihrem Element hinzufügen , das Text enthält. Das funktioniert gut.

Sie können ein Bild in :: vor dem Pseudoelement einfügen und die gleichen Abmessungen wie für das Bild festlegen + Überlauf hinzufügen: versteckt, wie:

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

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

Ich konnte dieses Problem beheben, indem ich die Schriftgröße auf 0 stellte .

Wie wäre es mit display: none;

Das verbirgt alles.