Toni Michel Caubet Toni Michel Caubet - 1 month ago 19
CSS Question

Display first letter only

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

Edit: Disclaimer: this does not work according to comments. Please don't use as-is without checking it fits your needs.

If you check the specification for the :first-letter pseudo-element, you'll notice the following:

The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

The important word here is "block."

You are trying to use the pseudo-element on an <a/> tag with class of Twitter. By default, anchor tags are inline elements (not block level elements).

For your given markup, one solution to your problem would be to style the anchor this way:

.Twitter {
    display:block;
    visibility:hidden;
}

.Twitter:first-letter {
    visibility:visible;
}‚Äč

I'm not sure exactly what you are going for, but that is good enough for experimental purposes. Check out a demo here: http://jsfiddle.net/H7jhF/.