Mastering the Drop Cap: Why initial-letter is a Game Changer

Hey there! Grab a coffee, because we need to talk about one of those "small" CSS features that actually solves a massive headache. You know that classic magazine look where the first letter of an article is huge and spans multiple lines? It’s called a drop cap, or "Буквица" as we say in the design world. For years, achieving this look in a web browser was like trying to perform surgery with a butter knife. But thanks to the initial-letter property, we finally have a surgical tool that actually works.

How we suffered before

Back in the day, if a designer handed you a mockup with a drop cap, you’d probably sigh. We had to use the ::first-letter pseudo-element combined with float: left . Sounds simple, right? Wrong.…