CODEWITHSUNDEEP
csspseudo-element
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

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

Upvotes: 25

Views: 41851

Answers (8)

Dexter_ns88
Dexter_ns88

Reputation: 540

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.

Upvotes: 40

Nikolay
Nikolay

Reputation: 1106

Here's what I do:

.Twitter{
        display:block;
        width:1ch;
        overflow:hidden;
        white-space: nowrap;
    }

Upvotes: 0

Vucko
Vucko

Reputation: 20834

Another way is to use color: transparent

.twitter{
  display: block;
  color: transparent;
}

.twitter:first-letter{
  color: #000;
}
<div id="socialMedia">
    <a class="twitter">Twitter</a>
</div>

JSFiddle

However, this won't work for lte IE8.

References:

Upvotes: 6

TJ Koblentz
TJ Koblentz

Reputation: 6948

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/.

Upvotes: 26

albert
albert

Reputation: 8153

shoot the content off the page and show the letter using dynamic content: 

  
.twitter{
    text-indent:-9999px;
    display:block; 
    position:relative;
}
.twitter:before,.twitter::before{
    content:"T";
     position:absolute;
    width:10px;
    height:15px;
    z-index:100; 
    text-indent:9999px;
}

at play in this fiddle:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/

Upvotes: 2

mahemoff
mahemoff

Reputation: 46379

The pure-CSS answers use visibility and color tricks to hide the remaining letters, but they are still present and affecting layout. It could cause layout issues, e.g. if you wish to float the element and put something beside it.

I found a funny way to do this without hidden elements. The trick is to shrink the entire word down to almost nothing and then blow up just the first letter. It's a bit like OP was trying to do, but it works because it's operating on a continuous spectrum rather than display: none which just shuts down anything inside it. (Kind of an analogue > digital situation.)

Demo

HTML:

<div>Ding Dong</div> and other stuff

CSS:

div {
  font-size: 0.0000016px;
  float: left;
}

div::first-letter {
  color: red;
  font-size: 10000000em;
}

Result:

http://i.imgur.com/3WeNZ55.png

Upvotes: 1

njsokol
njsokol

Reputation: 119

Why not just use JavaScript and split the string into an array and use the first item in the array. Or charAt()

Upvotes: 1

sachleen
sachleen

Reputation: 31131

What you're doing is like hiding a parent element and trying to show one of its children, it won't work because the parent's style overrides it. The parent element also has to be a block level element for it to work. Like a div or p tag, or display: block; on the a tag.

Here's something using color:

HTML

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

CSS

body {
  background-color:#FFF;
}
.Twitter{
    display: block;
    color:#FFF;
}
.Twitter:first-letter {
    color:#000;
}

Upvotes: 2

Related Questions