Drop caps have been used for a long time with print media to give panache to the first letter of the first paragraph of a section or chapter. These drop caps help draw attention and entice the reader, and it’s often a good occasion to use a very stylized font because it’s applied on only one letter so it won’t affect the text’s readability. The same drop cap effect can be accomplished with CSS using the  ::first-letter pseudo element and the new  initial-letter property.

::first-letter Pseudo Element Selector

::first-letter is a pseudo element selector similar to  ::before and  ::after that effectively makes the first letter of an element stylable as if it was its own distinct element, all without having to add any additional markup to your pages.

#css