How do I use a css pseudo element?

hoodedvul

Pseudo element defines a specific style of part of an element.

Note:
Pseudo class defines the special state of an element.

The HTML code for this example is just a heading.

...
<h1>This fine day!</h1>
...

The CSS code for a pseudo element to a html heading, first-letter

...
  h1::first-letter {
           font-size: 50px;
           font-style: italic;
           color: greenyellow
       }
...

The result is:
Pseudo element defines a specific style of part of an element.

Note:
Pseudo class defines the special state of an element.

The HTML code for this example is just a heading.

...
<h1>This fine day!</h1>
...

The CSS code for a pseudo element to a html heading, first-letter

...
  h1::first-letter {
           font-size: 50px;
           font-style: italic;
           color: greenyellow
       }
...

The result is:
Pseudo element defines a specific style of part of an element.

Note:
Pseudo class defines the special state of an element.

The HTML code for this example is just a heading.

...
<h1>This fine day!</h1>
...

The CSS code for a pseudo element to a html heading, first-letter

...
  h1::first-letter {
           font-size: 50px;
           font-style: italic;
           color: greenyellow
       }
...

The result is:

For a list of other pseudo elements with examples see this link: https://www.w3schools.com/css/css_pseudo_elements.asp