CSS ::first-letter pseudo selector

::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.

I like to hear from you about this !!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.