6

I've implemented some ::first-letter styles for my p elements. However, when I add display: inline-flex to make them inline, all the ::first-letter styles stop working.

How can I make the elements inline while keeping the ::first-letter styles?

 p:first-of-type::first-letter {
    font-size: 25px;
    font-weight: bold;
 }

 p:nth-of-type(2)::first-letter {
    font-size: 25px;
    font-weight: bold;
 }

  p:nth-of-type(3)::first-letter {
    font-size: 25px;
    font-weight: bold;
 }

/* inline container */
p {                               
    display: inline-flex;
    width: 33%;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Slasher
  • 568
  • 7
  • 29

1 Answers1

10

A flex container (that is, an element with display: flex or display: inline-flex) cannot contain a ::first-letter pseudo-element, since a flex container contains flex items, not formatted lines. That's why making your p elements flex containers disables all your ::first-letter rules.

This appears to be the classic case of using display: flex/inline-flex when you're not trying to create a flex layout within each element. For inline (or horizontal) layout of block containers, use display: inline-block, display: table-cell, or floats, instead.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • If I use diplay: inline-block solves the problem, but then top margin disapears. https://jsfiddle.net/Lfkf1dtx/1/ – Slasher Apr 04 '17 at 19:20