CSS PSEUDO ELEMENTS

CSS Pseudo Elements are used to style specific parts of an element.

Here's the syntax:

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

::first-line

The :first-line pseudo-element is used to select the first line of text to style it. It only applies to block elements.

p::first-line {
  color: #00ff2a;
}

Output:

::first-letter

The :first-letter pseudo-element is used to style the first letter of the text. It only applies to block elements.

p::first-letter {
  color: #ff5100;
  font-size: 50px;
}

Output:

::before

The ::before pseudo-element is used to style the content that comes before an element.

p::before {
  content: "=>";
  font-size: 20px;
  color: red;
}

Output:

::after

The ::after pseudo-element is used to style the content that comes after an element.

p::after {
  content: "...";
  color: red;
}

Output:

::marker

The ::marker pseudo-element is used to select the markers of list items.

::marker {
  color: rgb(60, 255, 0);
}

Output:

::selection

The ::selection pseudo element targets part of the text is that is selected by the user.

::selection {
  color: red;
  background: rgb(0, 140, 255);
}

Output: