Do you think IIT Guwahati certified course can help you in your career?
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.
What are pseudo-elements in CSS?
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.
List of pseudo-elements in CSS
The table below shows the list of CSS pseudo-elements along with their short description and example.
Selector
Description
Example
::after
Inserts something after the content of each selected element(s).
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>
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.
Example
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-left: 20px;
text-indent: 20px;
}
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 {
width: 500px;
line-height: 1.5;
}
h2 + p::first-letter {
color: white;
background-color: black;
border-radius: 2px;
box-shadow: 3px3px0 red;
font-size: 250%;
padding: 6px3px;
margin-right: 6px;
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
ulli::marker
{
color: red;
font-size: 1.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.
Example
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.
Backdrop
The ::backdrop pseudo-element is used to style the background area of elements displayed in fullscreen mode or inside modals (such as <dialog>). It allows you to customize the appearance of the overlay behind the main content.
Example
<dialog open>
<p>This is a dialog box.</p>
</dialog>
<style>
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
}
</style>
Explanation: When the <dialog> element is displayed, the ::backdrop styles the background with a dark semi-transparent overlay, making the dialog stand out.
Placeholder
The ::placeholder pseudo-element is used to style the placeholder text in input or textarea fields. This text is displayed when the field is empty and provides a hint to the user.
Example
<input type="text" placeholder="Enter your name" />
<style>
input::placeholder {
color: gray; /* Gray text color for the placeholder */
font-style: italic; /* Italicized placeholder text */
}
</style>
Explanation: The placeholder text "Enter your name" is styled to appear in gray and italic, enhancing the input field's visual appeal while guiding the user.
Frequently asked questions
What is pseudocode CSS?
Pseudocode in CSS refers to written guidelines that outline styling logic without using actual code syntax, helping developers plan CSS structures.
What is a pseudo-state in CSS?
A pseudo-state in CSS represents a specific state of an element (like :hover or :active) that applies styles when the element is in that state.
What is the use of :: in CSS?
In CSS, :: is used to select pseudo-elements like ::before and ::after, enabling styling of specific parts of elements without extra HTML.
Why is pseudocode used?
Pseudocode is used to outline logic or algorithms in simple language, making it easier to understand and translate into actual code.
Is hover a pseudo-element?
No, :hover is a pseudo-class, not a pseudo-element. It targets an element when the user interacts with it, such as hovering over it with a mouse.
How many pseudo-elements are there in CSS?
CSS has seven pseudo-elements at present.
Conclusion
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.
310+ registered 
