CODEWITHSUNDEEP
htmlcsspseudo-elementdrop-cap
Antoine C
Antoine C

Reputation: 1

How to handle nested div with ::first-letter pseudo-element

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.

Upvotes: 0

Views: 64

Answers (0)

Related Questions