About pseudo elements.

What are Pseudo-Elements?

A CSS pseudo-element is used to style specified parts of an element.

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

Syntax

The syntax of pseudo-elements:

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 a text.

The following example formats the first line of the text in all <p> elements:

Example

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Note: The ::first-line pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-line pseudo-element:

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

Notice the double colon notation - ::first-line versus :first-line

The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.

2) Pseudo elements are inline in nature by default.

3) Example 0: First let's see the output without pseudo element :: before

4) Example 1: With pseudo element :: before

Using direct child selector > we have used the ::before pseudo element in the li items.
Output: before every li items the content: ghfgfhgf of the pseudo element is present.

5) Example 2: With pseudo element :: before and ::after, and also using the color property.

Using direct child selector> we have given the li two pseudo element :: before and ::after
a) content: '<before>'; of the pseudo element property :: before is placed in front of every li items and also color of each content is red.

a) content: '<after>'; of the pseudo element property :: after is placed in back of every li items and also color of each content is yellow.

6) Example 3: Using border property in the pseudo element.

The content of the ::before and ::after pseudo element has got border around them because of the border property used.

7) Example 4: Giving display: block; property to the pseudo element ::before

we have given display block to only pseudo element ::before
since block level elements will push the content after it to the next line because it takes the entire width to itself, that's why all the city names are pushed to the next line by the content: '<before>'; of the pseudo element ::before.

8) Example 5: Using display: inline-block; and margin-right: property to the pseudo element :: before.