Pseudo elements

A CSS pseudo-element is a keyword added to a CSS selector that lets you style a specific part of the selected HTML element. As a matter of fact pseudo element is used to work on written items inside html element.

The general syntax for CSS pseudo-elements looks like this:

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

There are the six main pseudo-elements in CSS.

1. ::after

2. ::before

3. ::first-letter

4. ::first-line

5. ::marker

6. ::selection

There are others, but they are still considered experimental technology. So, in this post, the focus will be on the main six pseudo-elements.

::after

The ::after creates a pseudo-element that represents the last child of a selected HTML element. It is used to add styling to this particular element with the CSS content property. The syntax looks something like this:

selector::after {
  content: "value";
}

One of the example that i recently used was

HTML

<h1>Hello</h1>

CSS

h1::after{
  content:"😁";
}

Output

::before

The ::before creates a pseudo-element that represents the first child of a selected HTML element. It is inline by default, and it is used to add styling to this particular element in collaboration with the CSS content property. The syntax looks something like this:

selector::before {
  content: "value";
}

HTML

<h1>Hello</h1>

CSS

h1::before{
  content:"😁";
}

Output

::first-letter

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a targeted element.The syntax looks something like this:

selector::first-letter {
  content: "value";
}

HTML

<p>This is a sample paragraph for illustration purpose.</p>

CSS

p::first-letter{
    font-size: 3rem;
    font-weight: bold;
    color: grey;
}

Output

::first-line

The ::first-line CSS pseudo-element applies styles to the first line of the targeted element. The syntax looks something like this:

selector::first-line {
  content: "value";
}

CSS

p ::first-line{
  text-decoration: underline;
  font-weight: bold;
  font-size: 1.5rem;
}

Output

::marker

The ::marker pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It is used on list items and the summary element. The syntax looks like this:

selector ::marker {
  property: value;
}

HTML

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>consectetur adipiscing elit</li>
  <li>sed do eiusmod tempor incididunt</li>
  <li>ut labore et dolore magna</li>
</ul>

CSS

li::marker{
  content:"🤯 ";
  font-size: 1.5rem;
}

Output

::selection

The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).The syntax looks something like this:

selector::first-line {
  content: "value";
}

CSS

p::selection{
  color: white;
  background-color: #BF3325;
}

Output