2

:first-letter pseudo-element isn't working for div with display: flex property. but it works for block and inline-block elements.

div {
  display: flex;
  text-transform: lowercase;
}

div:first-letter {
  text-transform: uppercase;
}
<div>flex</div>
<div style="display: block">block</div>
<div style="display: inline-block">inline-block</div>
VXp
  • 11,598
  • 6
  • 31
  • 46
Vivekraj K R
  • 2,418
  • 2
  • 19
  • 38
  • You can, however, assign the style to the first child of the flex container. `div::first-letter, div > :first-child::first-letter {..}` Provided, of course, that the div does have child elements. – Mr Lister Jun 08 '18 at 07:05
  • For more info you can refer this "https://stackoverflow.com/questions/7631722/css-first-letter-not-working" – VikrantGharat Jun 08 '18 at 12:23

0 Answers0