1. A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s)
2. For example, ::first-line can be used to change the font of the first line of a paragraph
3. syntax

       selector::pseudo-element {
           property: value;
       } 

4. Double colons (::) are used for pseudo-elements
5. This distinguishes pseudo-elements from pseudo-classes that use a single colon (:) in their notation
6. Pseudo-elements do not exist independently
7. The element of which a pseudo-element is a part is called its originating element
8. A pseudo-element must appear after all the other components in the complex or compound selector
9. The last element in the selector is the originating element of the pseudo-element
10. For example, you can select a paragraph's first line using p::first-line but not the first-line's children
11. So p::first-line > * is invalid
12. A pseudo-element can be selected based on the current state of the originating element
13. For example, p:hover::first-line selects the first line (pseudo-element) of a paragraph when the paragraph itself is being hovered (pseudo-class)

Friends, romans, countrymen, hover over me!

    <p class="mypara">Friends, romans, countrymen, hover over me!</p>
                    

    .mypara::first-letter {
        font-size: 2.5rem;
        font-weight: bold;
        color: #a52a2a;
    }

    .mypara:hover::first-line {
        background-color: lightgoldenrodyellow;
    }