Psuedo elements in CSS

Psuedo elements are those elements which are added in a page but can not be manipulated via JavaScript. Here is the list of Psuedo elements.

• ::before - creates the Psuedo element and added as a first child of selected element
• ::after
• ::selection
• ::first-letter
• ::first-line

span::before {
    content: '🙂';
}

In above example, smiley icon is added before every span element.

Pseudo Classes

Pseudo classes are used to apply styles based on the special state of elements.

• :hover
• :active
• :focus
• :playing
• :paused
• :enabled
• :disabled
• :checked
• :required
• :root
• :empty
• :nth-child
• :first-child
• :last-child
• :in-range
• :invalid