Display first letter only

css pseudo-element

Toni Michel Caubet · Jul 16, 2012 · Viewed 25.8k times · Source

Lets say this markup:

<div id="socialMedia">
    <a class="Twitter">Twitter</a>
</div>

What i want is only to be visible the first letter of the text (in this case, just a T)

(Actually I won't end up using it but I am curious about this; sure can be helpfull later)

So this was my a attempt:

#socialMedia .Twitter{
    display:none;
}
#socialMedia .Twitter:first-letter {
    display: block !important;
}

I was able to check that it won't achieve it. Question is why? and is there some work-around this?

-EDIT-

We are looking for IE=+7/8 version capable solutions..

Salut

Answer

Try something like this:

.Twitter {
  font-size: 0;
}

.Twitter:first-letter {
  font-size: 12px;
}

<div class="Twitter">Twitter</div>

Maybe this is not the best solution, but it works.