Dropcap not working on long form posts

Hosting on Micro.blog
1

Hi Micro.blog team,

I’m trying to add dropcap styling using CSS ::first-letter pseudo-elements on my Bothy theme blog, and I’ve encountered an issue.

What works:

  • Dropcaps display correctly on the home page using this selector:
css

article.post .e-content > p:first-of-type::first-letter

What doesn’t work:

  • The same dropcap styling does not apply on individual/permalink post pages, even with these selectors:
css

article.post .e-content > p:first-of-type::first-letter
article.h-entry .e-content > p:first-of-type::first-letter

Testing performed:

  • I tested with JavaScript and confirmed the selector correctly targets the element on individual post pages:
javascript

document.querySelector('article.post .e-content > p:first-of-type')

This returns the correct element, but CSS ::first-letter styling still doesn’t render.

  • I’ve added the CSS to both Custom CSS and the theme’s style.css file

  • I’ve cleared cache multiple times

  • I’ve waited for propagation

Is there something in the Bothy theme or Micro.blog’s rendering that prevents ::first-letter from working on individual post pages? Any guidance would be appreciated!

Blog: [https://tobygeeksout.micro.blog]

Thanks!

2

The dropcap works well in single posts for long-form content. Thanks to Perplexity for helping out with that. It was exhausting after many hours figuring out what I did wrong! Sigh.