Home 〉 CSS Tutorials 〉 CSS Pseudo-Elements Explained with Examples | Beginner-Friendly Guide

CSS Pseudo-Elements Explained with Examples | Beginner-Friendly Guide !

CSS Pseudo-Elements Explained with Examples | Beginner-Friendly Guide !

Need to style part of an element's content? CSS pseudo-elements like `::before`, `::after`, and `::first-line` let you insert and style content without touching the HTML. This is helpful for adding icons, styling the first letter, or custom bullets.

Introduction

CSS pseudo-elements let you style specific parts of an element—like the first letter of a paragraph or adding content before or after an element—without extra HTML. Let's go through each pseudo-element with simple examples.

In this Tutorial, we are going to cover the following CSS 'Pseudo-Elemenets':

  1. '::before'
  2. '::after'
  3. '::first-letter'
  4. '::first-line'
  5. '::selection'
  6. '::placeholder'
  7. '::marker'

What is a CSS Pseudo-Element?

A pseudo-element starts with '::' and is used to style parts of elements that are not normally targetable with regular selectors.

Syntax:

Syntax ✍

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

List of Common CSS Pseudo-Elements

1. '::before' - Add Content Before Element

Adds content before the element's actual content.

Code : 1 📝

<!DOCTYPE html>
<html>
<head>
<style>

.para::before {
content: "Note: ";
color: red;
}

</style>
</head>
<body>

<p class="para">This is a paragraph.</p>

</body>
</html>

output 📌

This is a paragraph.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Result: Displays “Note:” in red before the paragraph text.

Please Note :
  • In this tutorial, we styled an 'HTML element' using its 'class attribute' to maintain website alignment.
  • You can also 'style' elements directly by their 'tag names'.
  • For more details on accessing elements by 'tag name' or 'class name', check our complete blog post on 'CSS selectors'.

2. '::after' - Add Content After Element

Adds content after the element's actual content.

Code : 2 📝

<!DOCTYPE html>
<html>
<head>
<style>

.para1::after {
content: " --->";
}

</style>
</head>
<body>

<p class="para1">This is a paragraph.</p>

</body>
</html>

output 📌

This is a paragraph.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

3. '::first-letter' - Style the First Letter

Code : 3 📝

<!DOCTYPE html>
<html>
<head>
<style>

.para2::first-letter {
font-size: 2em;
color: green;
}

</style>
</head>
<body>

<p class="para2">This is a paragraph.</p>

</body>
</html>

output 📌

This is a paragraph.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Stylize the beginning of a paragraph like a storybook.

4. '::first-line' - Style the First Line of Text

Code : 4 📝

<!DOCTYPE html>
<html>
<head>
<style>

.para3::first-line {
font-weight: bold;
}

</style>
</head>
<body>

<p class="para3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, fuga! Dolores labore repellendus, ex impedit expedita quae officiis. Harum, sunt dolore recusandae nam natus sapiente? Error assumenda necessitatibus voluptatem odio!</p>

</body>
</html>

output 📌

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, fuga! Dolores labore repellendus, ex impedit expedita quae officiis. Harum, sunt dolore recusandae nam natus sapiente? Error assumenda necessitatibus voluptatem odio!

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

5. '::selection' - Style Selected Text

Code : 5 📝

<!DOCTYPE html>
<html>
<head>
<style>

.para4::selection {
background: yellow;
color: black;
}

</style>
</head>
<body>

<p class="para4">This is a paragraph.</p>
<p class="para5">This is a paragraph.</p>

</body>
</html>

output 📌

This is a paragraph.

This is a paragraph.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

  • Highlight selected text with custom styles.
  • Select class="para4" & select class="para5", you will see that 1st paragraph turn background color yellow while selecting

6. '::placeholder' - Style Placeholder Text

Targets the placeholder text in form input fields.

Code : 6 📝

<!DOCTYPE html>
<html>
<head>
<style>

input::placeholder {
color: red;
}

</style>
</head>
<body>

<input type="text" placeholder="Enter Name">

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

7. '::marker' - Style List Markers

Targets the bullet or number in a list. Refer our post on HTML List Tags for more details

Code : 7 📝

<!DOCTYPE html>
<html>
<head>
<style>

.list-item::marker {
color: blue;
}

</style>
</head>
<body>

<ul>
<li class="list-item">List Item1</li>
<li class="list-item">List Item2</li>
<li class="list-item">List Item3</li>
</ul>

</body>
</html>

output 📌

  • List Item1
  • List Item2
  • List Item3
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

How Pseudo-Elements Help

  • Add content without modifying HTML.
  • Style specific parts like the first letter or line.
  • Enhance UI experience (e.g., stylized form placeholders or list bullets).

Conclusion

CSS pseudo-elements give you fine-grained control over styling without changing the HTML structure. They are perfect for enhancing design while keeping your HTML clean.

Practice using '::before', '::after', and others to create visually appealing effects on your site.

Suggested Posts:

Related Topics:

Frequently Asked Questions (FAQs)

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

Pseudo-elements use '::' and style parts of elements (like '::before'), while pseudo-classes use ':' and style based on state or position (like ':hover').

Can I combine pseudo-elements with classes?

Yes! Example:

p.note::before {
content: " ";
}

Are pseudo-elements supported in all browsers?

Most modern browsers support all major pseudo-elements. '::marker' and '::placeholder' may have minor differences in older versions.

Previous Post Next Post