0

I'm experiencing trouble trying to implement drop-cap using pseudo-element ::first-letter. The thing is, since we're building a CMS, I can't know in advance the structure of the DOM. So we could have to display a layout like this:

<div>
    First letter should be bigger
</div>

or this

<div>
     <div>
         First letter should be bigger
     </div>
 </div>

We support mainly Chrome, Safari, and Firefox. The problem is showing with the latter, if you try to run this HTML snippet with it :

<html>
    <style>
        .first::first-letter {
            font-size: 100px;
        }
    </style>
    <body>
      <div class="first">
          <div>
            Hello
          <div>
      </div>
    </body>
 </html>

You get this display for Chrome and Safari

And this one for Firefox

So my questions are, is this a known issue with Firefox ? Have you also experienced this and if so did you manage to find a workaround ?

Thanks in advance

Tried to implement a drop cap using ::first-letter pseudo-element on nested div, I expected to have the same behavior on Chrome Safari and Firefox, but Firefox seems to behave differently.

Antoine C
  • 1
  • 1
  • 1
    [::first-letter](https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter) _"The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element"_ It was hard to believe it targeted the selected element descendants like you expected there in any browser but indeed in chrome it worked. That thing to work also on FF would require something like `.first *{display: contents;}` that would be a rule working with the information you have upfront but yet would be invasive with any arbitrary descendants of `.first` – Diego D Feb 07 '23 at 10:06
  • Indeed it does work with Firefox but as yoy said it's too invasive, I cannot consider applying `display: contents` to all descendants since we use inline or flex components in the text body. – Antoine C Feb 07 '23 at 10:42
  • but I'm not sure there are many ways... I mean if you are controlling that trait with the class `first` why you can't just assign it to the element actually holding the content? There's no way to circumnavigate the issue just controlling which is the further descendant having that style? or better... there are some criteria you can give for granted to make a selector getting there? maybe using strategies like `.first *:not(:empty)::first-letter` / `.first:first-child::first-letter` or the like. Of course those selectors will target too many/too specific elements – Diego D Feb 07 '23 at 10:53

0 Answers0