Workaround For Firefox Ignoring line-height In Floated Pseudo Element

Question

I'm trying to style a drop-cap using the :first-letter pseudo selector, but Firefox is ignoring line-height:

p {
  font-family: sans-serif;
  line-height: 3rem;
  font-size: 2.4rem;
}

p:first-letter {
  float: left;
  background-color: black;
  color: white;
  line-height: 6rem;
  font-size: 4.8rem;
  padding: 0 1rem;
  margin-right: 0.5rem;
}

<p>Feugiat adipisci salutandi mei eu, eu vix purto vero oratio. Eam justo viris
iudicabit te, sea dico esse tritani ea. Sed ad epicurei splendide. Ut constituam
delicatissimi usu. Et pro quem ceteros, ad cum doming eripuit reformidans.
Suspendisse pulvinar congue elit, vitae tincidunt mauris tempus non. Morbi
mattis tellus orci, sit amet tincidunt nibh ullamcorper vitae. Phasellus
  suscipit augue nec diam elementum, at porta est egestas.</p>

It appears to be an ancient bug / feature. See here.

Is there a workaround?

I cannot modify the markup at all, so no wrapping the first letter in another element to allow targeting it without first-letter.

I can't use vertical padding as Firefox collapses to a different line-height than other browsers, even at a line-height of zero, meaning I would have to target FF with different vertical padding values.

Setting display explicitly to block, inline-block or flex has no effect.

Setting height or min-height has no effect.

I am aware of inital-letter but the support is a long way from enough.

According to [this](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height), it is supported by all versions (all but versions predating version 1) of Firefox. — meyi, May 21 '18 at 20:03
Have you tried applying `display: inline-block;`? I've found it to sometimes be necessary in order to get `line-height` to be honored.... just tried it, doesn't seem to solve it. Strange. — random_user_name, May 21 '18 at 20:04
@cale_b Yep. I've updated the answer. No `display` prop has any effect. — Undistraction, May 21 '18 at 20:06
and I suppose you don't want to apply any HTML modification ? — Temani Afif, May 21 '18 at 20:08

Temani Afif · Answer 1 · 2018-05-21T20:30:13.730

I would adjust margin-top of the first letter then consider a gradient as a background for the main element to simulate the background of the first letter:

p {
  font-family: sans-serif;
  line-height: 3rem;
  font-size: 2.4rem;
  background:linear-gradient(#000,#000) 0 0/4.8rem 6rem no-repeat;
}

p:first-letter {
  float: left;
  color: white;
  font-size: 4.8rem;
  padding: 0 1rem;
  margin-right: 0.5rem;
  margin-top: 1.5rem; /*adjust this as you need*/
}

<p>Feugiat adipisci salutandi mei eu, eu vix purto vero oratio. Eam justo viris
iudicabit te, sea dico esse tritani ea. Sed ad epicurei splendide. Ut constituam
delicatissimi usu. Et pro quem ceteros, ad cum doming eripuit reformidans.
Suspendisse pulvinar congue elit, vitae tincidunt mauris tempus non. Morbi
mattis tellus orci, sit amet tincidunt nibh ullamcorper vitae. Phasellus
  suscipit augue nec diam elementum, at porta est egestas.</p>

Interesting solution. Thanks. The problem with this approach is that there is varying whitespace above the letter across browsers and none in FF, so as I mention in the question, for consistency this would require different margin-tops for different browsers. — Undistraction, May 21 '18 at 20:22

Workaround For Firefox Ignoring line-height In Floated Pseudo Element

1 Answers1