::first-letter is a pseudo element which allows you to style the first letter in an element, without needing to stick a tag around that first letter in your HTML.
While no tags are added to the DOM, it is as if the targeted first letter were encompassed in a tag. You can style that first letter as you would a real element with.
The pseudo element only works if the parent element is a block container box. In other words, it doesn’t work on the first letter of display: inline; elements.
If you have both a ::first-letter and ::first-line on an element, the first letter will inherit from the first line styles, but styles on the ::first-letter will overwrite when styles conflict.
If you generate content with ::before, the first letter or punctuation character, whether it’s part of the original text node or created with generated content, will be the target.