Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Pseudo-elements
3.
List of pseudo-elements in CSS
3.1.
The after pseudo-element
3.2.
The before pseudo-element
3.3.
The first-line pseudo-element
3.4.
The first-letter pseudo-element
3.5.
The marker pseudo-element
3.6.
The selection pseudo-element
4.
Frequently asked questions
5.
Key Takeaways
Last Updated: Mar 27, 2024

Pseudo-elements in CSS

Introduction

Pseudo-elements are one of the essential aspects when it comes to making powerful and dynamic CSS. By dynamic and powerful, we imply that for doing the same thing, we would require tonnes of Javascript and HTML code otherwise.


What we can accomplish with the pseudo-elements is pretty impressive. They open up a world of exciting design possibilities without compromising markup's semantics. 


Let's get started now, without further ado!

Pseudo-elements

Pseudo-elements are the before and after tags that we frequently encounter in CSS. They allow us to add elements to our code purely with CSS, eliminating the need for additional HTML. 


CSS pseudo-elements are used to provide selectors with special effects. To apply such effects, we don't need to use JavaScript or any other script.


The syntax to add pseudo-elements is given below:

Syntax: 

selector::pseudo-element 

{

  property: value;

}

 

Example: The::first-line can be used to modify the font of a paragraph's first line.

/* The first line of every <p> element. */

p::first-line {

  color: blue;

  text-transform: uppercase;

}

 

Important points to consider: 

  • The double colons (::) should be used as a standard. This is because CSS used to have one colon in earlier versions, and when CSS 3 specifications were released, adding two colons became the new norm. 
  • Inside a selector, we can only use one pseudo-element. It must appear after the simple selector.
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

List of pseudo-elements in CSS

The table below shows the list of CSS pseudo-elements along with their short description and example.

Now, let’s see these selectors one by one in detail.

The after pseudo-element

The after selector creates a pseudo-element that behaves like the last child of the selected element. 

 

Example: We'll make two classes in this example: one for Coding Ninjas and one for Code Studio. These classes can be used to insert pseudo-elements at the end of paragraphs.

HTML Code

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

  <meta charset="utf-8">

  <title>CSS_Pseudo</title>

  <link rel="stylesheet" href="after.css">

</head>

 

<body>

  <p class="Coding-Ninjas">Courses | Services | Community | Practise</p>

  <h3>"Coding Ninjas is a place that trains passionate people in various technologies.

    Our core programs are intensive, immersive training that transforms people into outstanding developers."</h3>

  <p class="Coding Ninjas Studio">Interview Experiences | Problems | Resources | Guided Paths</p>

</body>

 

</html>

CSS Code

.Coding-Ninjas::after {

  content" <- CODING NINJAS";

  color: green;

}

.Coding-Ninjas{

  background-color#FFBF00;

  font-weight:bold;

}

 

.Coding Ninjas Studio::after {

  content" <- CODESTUDIO";

  color: red;

 

}

.Coding Ninjas Studio{

  font-weight:bold;

  background-color#FFBF00;

}

 

Output: CODING NINJAS and CODESTUDIO are added as pseudo-elements after the paragraphs.

The before pseudo-element

The before selector creates a pseudo-element that behaves as the first child of the selected element. 

 

Let's understand with the help of the above example. 

 

By making a slight change in the CSS of the above example and keeping the HTML unaltered, we can change the positioning of CODING NINJAS and CODESTUDIO. 

CSS Code

.Coding-Ninjas::before {

  content"CODING NINJAS -> ";

  color: green;

}

.Coding-Ninjas{

  background-color#FFBF00;

  font-weight:bold;

}

 

.Coding Ninjas Studio::before {

  content"CODESTUDIO -> ";

  color: red;

 

}

.Coding Ninjas Studio{

  font-weight:bold;

  background-color#FFBF00;

}

 

Output: CODING NINJAS and CODESTUDIO are added as pseudo-elements before the paragraphs.

The first-line pseudo-element

The first line applies styling to the first line of the selected block-level element. The length of the first line is determined by several factors, including the element's width, the document's width, and the font size of the contents.

 

Example: This paragraph's first line will only have styles applied to it. The content will then be styled as usual.

HTML Code

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

  <meta charset="utf-8">

  <title>CSS_Pseudo</title>

  <link rel="stylesheet" href="after.css">

</head>

<body>

  <p>"Coding Ninjas is a place that trains passionate people in various technologies.</p>

 

  <span>The core programs are intensive, immersive training that transforms people into outstanding developers.</span>

</body>

</html>

CSS Code

::first-line {

  font-style: italic;

  color: blue;

  font-weight: bold;

  text-transform: uppercase;

 

  /* WARNING: DO NOT USE THESE */

  /* Many properties are invalid in ::first-line pseudo-elements */

  margin-left20px;

  text-indent20px;

}

 

Output: 

The first-letter pseudo-element

The first line applies styling to the first letter of the first line of the selected block-level element.

 

Example: We'll use the first-letter pseudo-element to achieve a primary drop cap effect on the first letter of the paragraph, which comes just after heading 2.

HTML Code

<!DOCTYPE html>

<html lang="en" dir="ltr">

 

<head>

  <meta charset="utf-8">

  <title>CSS_Pseudo</title>

  <link rel="stylesheet" href="after.css">

</head>

 

<body>

  <h2>Coding Ninjas</h2>

  <p>"Coding Ninjas is a place that trains passionate people in various technologies.

    Our core programs are intensive, immersive training that transforms people into outstanding developers.</p>

  <span>The first letter of the above heading will not receive special styling because it is not a block-level element.</span>

</body>

 

</html>

CSS Code

p {

  width500px;

  line-height1.5;

}

 

h2p::first-letter {

  color: white;

  background-color: black;

  border-radius2px;

  box-shadow3px 3px 0 red;

  font-size250%;

  padding6px 3px;

  margin-right6px;

  float: left;

}

 

Output:

The marker pseudo-element

The marker pseudo-element chooses the marker box of a list item, which usually contains a bullet or number. It works on any element or pseudo-element that has the list-item property.

 

Example: 

HTML Code

<html lang="en" dir="ltr">

<head>

  <meta charset="utf-8">

  <title>CSS_Pseudo</title>

  <link rel="stylesheet" href="after.css">

</head>

<body>

  <ul>

  <li>Coding Ninjas Studio</li>

  <li>Coding Ninjas</li>

  <li>Course and Resources</li>

</ul>

</body>

</html>

CSS Code

ul li::marker 

{

  color: red;

  font-size1.5em;

}

 

Output:

The selection pseudo-element

The selection CSS pseudo-element applies styling to the portion of a document that has been highlighted by the user by clicking or dragging the mouse across the text.

HTML Code

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

  <meta charset="utf-8">

  <title>CSS_Pseudo</title>

  <link rel="stylesheet" href="after.css">

</head>

<body>

  Coding Ninjas is a place that trains passionate people in various technologies.

  <p>Courses | Services | Community | Practise</p>

 

</body>

</html>

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: After selecting the texts, it'll appear different.

Now, let’s see some of the frequently asked questions on this topic.

Frequently asked questions

 

What are the perks of using pseudo-elements?

Answer: CSS pseudo-elements are used to provide selectors with special effects.
 

How many pseudo-elements are there in CSS?

Answer: CSS has seven pseudo-elements at present.

 

Is it possible for a pseudo-element to have a pseudo-element?

Answer: Only one pseudo-element is allowed per selector, and it must come after the series of simple selectors representing the selector's subjects. 

Note: In a future version, several pseudo-elements per selector may be allowed.

 

Can we combine several CSS pseudo-elements for one element?

Answer: For one element, we can combine several CSS pseudo-elements. The ::after and ::before, on the other hand, cannot be used twice.

 

What is the difference between pseudo-elements and pseudo-classes?

Answer: A pseudo-element is a 'fake' element that does not appear in the document alongside the 'real' elements. Pseudo-classes are 'pseudo' classes applied to items under particular conditions, similar to how JavaScript manipulates the classes of elements.
 

Key Takeaways

In this article, we saw a critical CSS concept known as pseudo-elements. Pseudo-elements produce new elements that aren't defined in the document's markup and can be handled the same way that common elements can. 


This has a lot of advantages for producing amazing effects with minimal markup. It also helps keep the document's presentation out of HTML and into CSS, where it belongs. You can also check out some important CSS concepts such as Introduction to CSS, CSS Selectors, CSS Position and CSS Margins. 

 

While preparing for front-end roles, we suggest you go through the CSS Interview Questions, including the most common conceptual questions asked in interviews.

Happy Learning!

Live masterclass