Pseudo-elements

For example, it can be used to:

• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element
• These pseudo-elements are useful for creating decorative content, such as icons, images, borders, and other visual elements.

::before / ::after

• creates a new content (text or other graphical elements) before or after the content of the element selected.

a::before { 
  content: "<"; 
  margin-right: 5px; 
}
 
a::after { 
  content: ">"; 
  margin-left: 5px; 
}

::first-line / ::first-letter

• Styles the first line or first letter of an element.
• For example, you can use them to make the first letter of a paragraph larger or to add a different color to the first line of a heading.

h1::first-letter {
  font-size: 3em;
  color: red;
}
 
p::first-line {
  font-weight: bold;
  color: blue;
}

::selection

• Styles text that has been selected by the user.
• For example, you can use it to change the background color of selected text.

::selection {
  background-color: yellow;
}

::placeholder

• Styles the placeholder text of an input field.
• For example, you can use it to change the color or font of the placeholder text.

input::placeholder {
  color: gray;
  font-style: italic;
}