CSS :First-Letter Not Working

CSS :first-letter not working

::first-letter does not work on inline elements such as a span. ::first-letter works on block elements such as a paragraph, table caption, table cell, list item, or those with their display property set to inline-block.

Therefore it's better to apply ::first-letter to a p instead of a span.

p::first-letter {font-size: 500px;}

or if you want a ::first-letter selector in a span then write it like this:

p b span::first-letter {font-size: 500px !important;}
span {display:block}

MDN provides the rationale for this non-obvious behaviour:

The ::first-letter CSS pseudo-element selects 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.
...
A first line has only meaning in a block-container box, therefore the ::first-letter pseudo-element has only an effect on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect.

Another odd case(apart from not working on inline items) is if you use :before the :first-letter will apply to the before not the actual first letter see codepen

Examples

http://jsfiddle.net/sandeep/KvGr2/9/
http://krijnhoetmer.nl/stuff/css/first-letter-inline-block/

References

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
http://reference.sitepoint.com/css/pseudoelement-firstletter

Pseudo element first letter does not work

::first-selector doesn't work on inline elements, such as a tags.

Make link inline-block

.logo-home > .navbar-brand {
  display: inline-block;
}

.navbar-brand::first-letter, .subscribe-form::first-letter, footer h4::first-letter {
    color: #a32424;
    letter-spacing: 0.02em;
}

<div class="mx-auto navigation-desktop-home">
    <div class="logo-home">
        <a class="navbar-brand text-center w-100" href="/home.html">5test</a>
    </div>
</div>

CSS - First-letter selection not working with ID

That is because :first-letter can only be used on block level elements.

One solution could be to display the span as a block level element:

#fletter span {
   display:block;
}

#fletter span:first-letter {
   font-weight: 600;
   font-size: 25px;
}

jsFiddle here.

Combination :before and :first-letter is not working when adding display:flex

From the specification:

In CSS, the ::first-letter pseudo-element applies to block-like containers such as block, list-item, table-cell, table-caption, and inline-block elements. Note: A future version of this specification may allow this pseudo-element to apply to more display types.

As you can read, a flexbox container is not listed actually. It will probably be in the future:

Css ::first-letter on textarea does not work

You need a block container in order to use the ::first-letter pseudo-element:

<p>
    <textarea name="content" rows="18" placeholder="Your Message"
              title="Give Your Advice To Us" wrap="soft"></textarea>
</p>

And your CSS:

p::first-letter {
  text-transform: uppercase;
}

First-letter pseudo-element not working properly with quote sign in CSS

An option would be to use the ::before and ::after pseudo elements.

.quote::before,.quote::after {  content: "\0022";  font-size: 2em;  font-weight: bold;  color: green;  vertical-align: -.3em;}

<p class="quote">This is a great quote</p>

First letter not working if -webkit-box display property is set

To be accurate, ::first-letter only works for:

display: block;
display: inline-block;
display: flow-root;

So if you want a result that fit you, you should use js Color JS based on this subject

DEMO:

(function() {
    // Let's get all user names, you might have another structure
    var users = document.querySelectorAll('h2');
    
    // Create the span containing the highlighted asterisk
    var asterisk = document.createElement('span');
    asterisk.className = 'highlight';
    
    // Walk the users (teehee) and check if the first characer is an asterisk
    for (var i = 0; i < users.length; ++i) {
      var user = users[i];
      var text = user.textContent;
      var firstLetter = text[0];
      asterisk.appendChild(document.createTextNode(firstLetter));
      user.removeChild(user.firstChild);
      user.appendChild(asterisk);
      user.appendChild(document.createTextNode(text.slice(1)));
    }
})();

h2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
  text-overflow: ellipsis;

  width: 75px;
  border: 1px solid lightgray;
}

/*h2::first-letter {
  color: red;
}*/

.highlight {
  color: #f00;
}

<h2>This is a pretty simple test</h2>

::selection does not work on text which has ::first-letter

I remember coming across this a long time ago..

It's a known bug in chrome which still seems to be an issue!

https://bugs.chromium.org/p/chromium/issues/detail?id=17528

:first-letter not working with strong

Further to other answers, it also (in Chromium at least) works with elements with display: inline-block, so the display simply has to be anything other than inline (including list-item), for example:

strong {
    font-weight: bold;
    color: blue;
    display: inline-block;
}
strong::first-letter {
    color: red;
}

JS Fiddle demo.

Also, ::first-letter is a pseudo-element, so the syntax should be double-colon rather than single, in order to distinguish the selector from a pseudo-class.

CSS :First-Letter Not Working