Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS Psuedo-element

A CSS psuedo-element styles a specified part of an HTML element.

They are commonly used to add symbols or images before or after text.

A pseudo-element starts with a double colon (::) like ::after, ::beforeetc.

Example

#

An ::after pseudo-element which adds an image after the content.

We all love CSS 
<style>
  .pseudo::after {
    content: url('/img/css/heart.png');
  }
</style>

<div class="pseudo">
  We all love CSS&nbsp;
</div>

Using Pseudo-elements

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

Pseudo elements can be used to perform the following actions:

  • Style the first letter or first line of an element
  • Insert content before or after the element
  • Change the style of selected (highlighted) text

Syntax

Syntax of a pseudo element.

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

Code Explanation:

  • The selector refers to the HTML element(s) to be styled.
  • The ::pseudo-element specifies the element part (e.g. ::before, ::after).
  • The :: signifies that a pseudo-element follows.

Note:  Use double colons (::) instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. For historical reasons most browsers also accept a single colon (:) for pseudo-elements.


All Pseudo-elements

Below are the available CSS pseudo elements.

Selector Example Description
::before p::before Insert something before the content of each <p> element
::after p::after Insert something after the content of each <p> element
::first-letter p::first-letter Selects the first letter of each <p> element
::first-line p::first-line Selects the first line of each <p> element
::selection p::selection Selects the portion of an element that is selected by a user

More Examples

::before

The ::before pseudo-element inserts content before the element.

Content can be text, image, or another element.

This pseudo-element renders an image before the paragraph.

An image displays before this element

<style>
  .before::before {
    content: url('/img/css/check.png');
  }
</style>

<p class="before">
  An image displays before this element
</p>

And this psuedo-element creates a teal box before the paragraph.

A teal box displays before this element

<style>
  .beforeempty::before {
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background: teal;
    margin-right: 10px;
  }
</style>

<p class="beforeempty">
  A teal box displays before this element
</p>

::after

The ::after pseudo-element inserts content after the specified element.

Content can be text, image, or another element.

This pseudo-element renders an image before the paragraph.

An image displays after this element

<style>
  .after::after { 
    content: url('/img/css/check.png'); 
  }
</style>

<p class="after">
  An image displays after this element 
</p>

And this psuedo-element creates a teal box after the paragraph.

A teal box displays after this element

<style>
  .afterempty::after {
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background: teal;
    margin-left: 10px;
  }
</style>

<p class="afterempty">
  A teal box displays after this element
</p>

::first-letter

Use ::first-letter to style to the first letter of text in an element.

With font-size adjust the size of the letter.

This psuedo element enlarges the first letter in the text.

Paul Gauguin was a French Post-Impressionist artist. Unappreciated until after his death, Gauguin is now recognized for his experimental use of color and Synthetist style that were distinct from Impressionism. Toward the end of his life, he spent ten years in French Polynesia. The paintings from this time depict people or landscapes from that region.

<style>
 .first::first-letter {
   font-size: 32px;
 }
</style>

<p class="first">
  Paul Gauguin was a French 
  Post-Impressionist artist. 
  Unappreciated until after his 
  death, Gauguin is now recognized 
  for his experimental use of color 
  and Synthetist style that were
  distinct from Impressionism. 
  Toward the end of his life, he 
  spent ten years in French Polynesia. 
  The paintings from this time depict 
  people or landscapes from that 
  region.
</p>

For details on font-size, see our CSS font-size Property Reference.

::first-line

Use ::first-line to style the first line of a text in an element.

This psuedo element adds a custom style to the first line.

His work was influential on the French avant-garde and many modern artists, such as Pablo Picasso and Henri Matisse, and he is well known for his relationship with Vincent and Theo van Gogh. Gauguin's art became popular after his death, partially from the efforts of dealer Ambroise Vollard, who organized exhibitions of his work late in his career and assisted in organizing two important posthumous exhibitions in Paris.

<style>
  .firstline::first-line {
    color: orangered;
    font-style: italic;
  }
</style>

<p class="firstline">
  His work was influential on the French 
  avant-garde and many modern artists, such 
  as Pablo Picasso and Henri Matisse, and 
  he is well known for his relationship with 
  Vincent and Theo van Gogh. Gauguin's art 
  became popular after his death, partially 
  from the efforts of dealer Ambroise 
  Vollard, who organized exhibitions of his 
  work late in his career and assisted in 
  organizing two important posthumous 
  exhibitions in Paris.
</p>

::selection

Use ::selection to style the selected or highlighted portion of text.

To see the effect, the user must first select text.

This psuedo element adds a custom style to selected text.
Select text to view the style.

Paul Gauguin was a French Post-Impressionist artist. Unappreciated until after his death, Gauguin is now recognized for his experimental use of color and Synthetist style that were distinct from Impressionism. Toward the end of his life, he spent ten years in French Polynesia. The paintings from this time depict people or landscapes from that region.

<style>
  .selection::selection {
    color: white;
    background-color: firebrick;
  }
</style>

<p class="selection">
  Paul Gauguin was a French
  Post-Impressionist artist.
  Unappreciated until after his
  death, Gauguin is now recognized
  for his experimental use of color
  and Synthetist style that were
  distinct from Impressionism.
  Toward the end of his life, he
  spent ten years in French Polynesia.
  The paintings from this time depict
  people or landscapes from that
  region.
</p>

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides