CSS first letter Pseudo element
While the before and after pseudo elements inject content, first-letter works with content that exists as part of the document source. With first-letter, we can create initial letter effects, such as drop caps, as you might see in a magazine or book layout.
An initial capital is an uppercase letter at the start of a block of text that’s set in a larger font size than the rest of the body copy. A drop capital (or drop cap) is similar to an initial capital, but is inset into the first paragraph by at least two lines.
The first-letter pseudo-element doesn’t apply to elements such as a, b, or code. Nor does it apply to parent elements with a display property value of inline.
( how to create drop caps and initial letter effects )