deathlock deathlock - 6 months ago 55
CSS Question

Hide Text with CSS, Best Practice?

Let's say I have this element for displaying the website logo:

<div id="web-title">
<a href="" title="Website" rel="home">
<span>Website Name</span>

would be styled with
, but how to properly hide the text
Website Name
? As seen here: Hide text using css or here , I've seen various methods to hide the text, such as:

#web-title span { text-indent: -9999px; }


#web-title span { font-size: -9999px; }


#web-title span { position: absolute; top: -9999px; left: -9999px; }

I've also seen some combine those three methods. But actually which one is the best practice to hide text effectively?


Actually, a new technique came out recently. This article will answer your questions:

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;

It is accessible, an has better performance than -99999px.

Update: As @deathlock mentions in the comment area, the author of the fix above (Scott Kellum), has suggested using a transparent font: