XQA
Back to Web Development
2026-03-096 min read

CSS Pseudo-elements (Web Development)

Learn CSS Pseudo-elements (Web Development) step by step with clear examples and exercises.

Why This Matters

CSS Pseudo-elements are a crucial part of modern web development as they allow developers to style specific parts of an element that aren't directly accessible through traditional CSS selectors. By using them, you can create more engaging and interactive websites with enhanced design capabilities. Mastering CSS pseudo-elements is essential for acing coding interviews, debugging real-world issues, and creating visually appealing web applications that stand out from the competition.

Prerequisites

Before diving into CSS Pseudo-elements, you should have a solid understanding of:

  1. HTML basics (tags, attributes, and elements)
  2. CSS selectors and properties
  3. Box model concepts (margin, padding, border, width, and height)
  4. Familiarity with the cascading order in CSS and how specificity works
  5. Basic understanding of positioning properties like position: absolute, relative, and static
  6. Understanding of the content property and its use in CSS

Core Concept

CSS Pseudo-elements are denoted by a colon : followed by the name of the pseudo-element. They can be used in conjunction with standard CSS selectors to target specific parts of an element, such as before or after the content, the first line, the first letter, or even the selection made by users. Some common CSS Pseudo-elements include:

  1. ::before - Inserts content before the opening tag of the selected element
  2. ::after - Inserts content after the closing tag of the selected element
  3. ::first-line - Styles the first line of the selected element's content
  4. ::first-letter - Styles the first letter or character of the selected element's content
  5. ::selection - Styles the selected text by users (e.g., when highlighting)
  6. ::placeholder - Styles the placeholder text within form elements (e.g., input fields)
  7. ::backdrop - Applies a backdrop filter to the element and its descendants, creating a blur or other visual effect behind the content
  8. ::marker - Styles the bullet points of list items in various types of lists
  9. ::cue - Provides styling for speech and timing information associated with an element (e.g., captions or subtitles)

Example Usage

Let's create a simple example using the ::before and ::after pseudo-elements to add some decorative content around a heading:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h1 {
position: relative;
}

h1::before,
h1::after {
content: "";
display: block;
width: 50px;
height: 2px;
background-color: #333;
margin-top: 10px;
}

h1::before {
position: absolute;
left: -25px;
top: 0;
}

h1::after {
position: absolute;
right: -25px;
bottom: 0;
}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
</body>
</html>

In this example, we've added a before and after pseudo-element to an h1 element. The content property is empty for both, meaning we're only styling the elements without adding any actual content. We've also set the width, height, and background color of the pseudo-elements to create simple lines that frame our heading.

Example Usage with Content

Now let's modify the previous example to add some text content to the pseudo-elements:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h1 {
position: relative;
}

h1::before,
h1::after {
content: " "; /* Empty space character */
display: block;
width: 50px;
height: 2px;
background-color: #333;
margin-top: 10px;
}

h1::before {
position: absolute;
left: -25px;
top: 0;
content: "|"; /* Change the content to a pipe character */
}

h1::after {
position: absolute;
right: -25px;
bottom: 0;
content: "|"; /* Change the content to a pipe character */
}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
</body>
</html>

In this modified example, we've changed the content property of both pseudo-elements to a pipe character (|) to create vertical lines that frame our heading.

Worked Example

Let's create a more complex example using multiple pseudo-elements and some additional CSS properties:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

h1 {
position: relative;
color: #333;
margin: 50px auto;
text-align: center;
font-size: 2rem;
}

h1::before,
h1::after {
content: "";
display: block;
width: 75px;
height: 3px;
background-color: #333;
}

h1::before {
position: absolute;
left: -38px;
top: 20px;
}

h1::after {
position: absolute;
right: -38px;
bottom: 20px;
}

.highlight {
background-color: #ffe4b5;
}

.highlight::before,
.highlight::after {
content: "";
display: block;
width: 100%;
height: 3px;
background-color: #f06c64;
position: absolute;
top: -20px; /* Adjust the top and bottom offsets as needed */
}

.highlight::before {
z-index: -1;
}

.highlight::after {
z-index: 1;
}
</style>
</head>
<body>
<h1 class="highlight">Welcome to my website!</h1>
<p>This is some text that will be highlighted when selected by users.</p>
</body>
</html>

In this example, we've created a heading with a highlight class. The ::before and ::after pseudo-elements are used to create a background color beneath the heading, giving it a subtle 3D effect. We've also added two more pseudo-elements (::before and ::after) to the highlighted text to create a colored underline effect when users select the text. The use of the z-index property helps ensure that the background pseudo-elements appear beneath the main content.

Common Mistakes

  1. Forgetting to set the content property: Always make sure to specify the content for your pseudo-element, even if it's empty (e.g., content: "";).
  2. Incorrect positioning: Ensure that the position of your pseudo-elements is correctly set to absolute or relative, and that they are positioned accordingly using left, right, top, or bottom properties.
  3. Overlooking browser compatibility: Some CSS Pseudo-elements have limited support in older browsers. Always test your code in multiple browsers to ensure compatibility.
  4. Ignoring specificity issues: Pseudo-elements can lead to specificity issues when combined with other selectors. Be mindful of the cascading order and use specificity tools like the browser's developer console or online resources like Specificity Calculator (specificitycalculator.com) to help manage these issues.
  5. Ignoring the box model: Remember that pseudo-elements are part of the element they are applied to, so their width and height will be affected by padding and border properties.
  6. Incorrect use of content property: Be aware that the content property can accept various values, including strings, URLs for images or fonts, counters, and even complex expressions using CSS functions like attr().
  7. Misunderstanding the purpose of pseudo-elements: Some developers may not fully understand the purpose of each pseudo-element and use them inappropriately, leading to suboptimal results or unnecessary complexity in their code. Make sure to familiarize yourself with each pseudo-element's purpose and when it is most appropriate to use them.
  8. Ignoring accessibility considerations: Some pseudo-elements can have unintended consequences for users with disabilities, such as screen readers. Always test your code for accessibility issues and make adjustments as needed to ensure a positive user experience for all.

Practice Questions

  1. Create a heading with a before and after pseudo-element that creates a simple underline effect using a solid line and two separate elements (one above and one below the text).
  2. Given the following HTML:
<div class="container">
<h1>Welcome to my website!</h1>
<p>This is some text that will be highlighted when selected by users.</p>
</div>

Write the CSS to create a highlight effect on the heading and the paragraph using pseudo-elements. The highlight should appear as a solid line above and below each element.

FAQ

  1. Why can't I select the first letter or character of an element directly with CSS?
  • CSS doesn't provide a direct way to select the first letter or character of an element because it would be difficult to handle cases where the content is dynamically generated or changed by users (e.g., through JavaScript). Pseudo-elements like ::first-letter and ::first-line provide a workaround for this limitation.
  1. Can I use CSS pseudo-elements with JavaScript?
  • Yes, you can combine CSS pseudo-elements with JavaScript to create dynamic effects based on user interactions or other events. For example, you might use JavaScript to toggle the visibility of a pseudo-element or update its content in response to user actions.
  1. Are there any CSS pseudo-elements that I haven't covered here?
  • Yes! There are many more CSS pseudo-elements available, such as ::marker, ::backdrop, and ::cue. These can be used for various purposes, including styling lists, creating interactive elements, and enhancing accessibility. Exploring these additional pseudo-elements will help you expand your web development skills even further.
CSS Pseudo-elements (Web Development) | Web Development | XQA Learn