CSS Pseudo Elements

CSS Pseudo Elements | What is Pseudo Element in CSS? | Syntax & Sample Example

by

What is CSS Pseudo-elements?

Pseudo-elements act in a similar way, but, they work as if you had added a whole new HTML element into the markup, in place of utilizing a class to existing elements. Pseudo-elements start with a double colon ::.

For instance, it can be applied to:

  • Style an element when a user mouses over it
  • Style visited and unvisited links differently
  • Style an element when it gets focus

They are used to style a specific part of an element and start with a :: .

We also use : as a pseudo-element for backward compatibility.

::before and ::after are probably the most used pseudo-elements. They are used to add content before or after an element, like icons for example.

The pseudo-elements are:

::after creates a pseudo-element after the element
::before creates a pseudo-element before the element
::first-letter can be used to style the first letter of a block of text
::first-line can be used to style the first line of a block of text
::selection targets the text selected by the user

Do Check:

Pseudo Element & Pseudo Class Syntax

The syntax of pseudo-element:

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

The syntax of pseudo-classes:

selector:pseudo-class {
  property: value;
}

CSS classes can also be practiced with pseudo-elements −

selector.class:pseudo-element {property: value}

Examples of CSS Pseudo Elements

We want to make the font of the first line of the paragraph slightly bigger than the rest:

p::first-line {
  font-size: 1.5rem;
}

Or maybe we want the first letter to be bigger and bolder:

p::first-letter {
  font-weight: bolder;
  font-size: 2rem;
}

We can specify the content property to insert any kind of content like image, after or before an element:

p::before {
  content: url(/myimage.png);
}

.myElement::before {
    content: "Hey There!";
}

The :after pseudo-element

<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html>

Output:

pseudo elements in css example

The :before pseudo-element (Decorative example)

HTML Code:

<span class="ribbon">Notice where the orange box is.</span>

CSS Code:

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Output:

result of before pseudo element in css

The :first-line pseudo-element

<html>
   <head>
      <style type = "text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      </style>
   </head>

   <body>
      <p class = "noline">
         This line would not have any underline because this belongs to nline class.
      </p>
      
      <p>
         The first line of this paragraph will be underlined as defined in the 
         CSS rule above. Rest of the lines in this paragraph will remain normal. 
         This example shows how to use :first-line pseduo element to give effect 
         to the first line of any HTML element.
      </p>
   </body>
</html>

Output:

css pseudo elements example result

The :first-letter pseudo-element

The resulting example proves how to use the :first-letter element to add unique effects to the first letter of elements in the document.

<html>
   <head>
      <style type = "text/css">
         p:first-letter { font-size: 5em; }
         p.normal:first-letter { font-size: 10px; }
      </style>
   </head>

   <body>
      <p class = "normal">
         First character of this paragraph will be normal and will have font size 10 px;
      </p>
      
      <p>
         The first character of this paragraph will be 5em big as defined in the 
         CSS rule above. Rest of the characters in this paragraph will remain 
         normal. This example shows how to use :first-letter pseduo element 
         to give effect to the first characters  of any HTML element.
      </p>
   </body>
</html>

Output:

example 1 output

The ::selection pseudo element

HTML Code:

This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>

CSS Code:

/* Make selected text gold on a red background */
::selection {
  color: gold;
  background-color: red;
}

/* Make selected text in a paragraph white on a blue background */
p::selection {
  color: white;
  background-color: blue;
}

Output:

selection css pseudo element example output