CSS Pseudo-elements

A CSS pseudo-element are used to add style a specific part of the selector element in CSS by using ::before, ::after, ::first-line, etc psuedo-elements.

Pseudo-Elements Used

• ::first-line
• ::first-letter
• ::before
• ::after

Syntax of pseudo-element

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

The ::first-line Pseudo-element

The ::first-line Pseudo-element is used to add a special style to the first-line of text an element:

Example ::first-line Pseudo-element

p::first-line {
     background-color: #ded9d9;
     color: #00758F;
     font-weight: 800;
  }

Output

Science Definition: According to wikipedia, Science is a systematic enterprise that builds and organizes knowledge in the form of testable explanations and predictions about the universe.

The ::first-letter Pseudo-element

The ::first-letter Pseudo-element is used to make changes to the first letter of an element:

Example ::first-letter Pseudo-element

p::first-letter {
     color: #00758F;
     font-weight: 800;
     font-size: 40px;
  }

Output

Science Definition: According to wikipedia, Science is a systematic enterprise that builds and organizes knowledge in the form of testable explanations and predictions about the universe.

The ::before Pseudo-element

The ::before Pseudo-element is used to to insert some content OR image before the content of an element:

Example ::before Pseudo-element

p::before {
     content: url(img-button.jpg);
  }

Output

This is the paragraph 1.

This is the paragraph 2.

This is the paragraph 3.

This is the paragraph 4.

This is the paragraph 5.

The ::after Pseudo-element

The ::after Pseudo-element is used to to insert some content OR image after the content of an element:

Example ::after Pseudo-element

p::after {
     content: url(img-button.jpg);
  }

Output

This is the paragraph 1.

This is the paragraph 2.

This is the paragraph 3.

This is the paragraph 4.

This is the paragraph 5.