CSS Pseudo Elements

What are CSS Pseudo Elements?

CSS pseudo-elements allow you to style a specific part of an HTML element without adding extra HTML tags. They are written with two colons (::) followed by the pseudo-element name. Pseudo elements are commonly used to insert decorative content, style the first letter or first line of text, highlight selected text, and create modern visual effects.

Why Use CSS Pseudo Elements?

Pseudo elements help keep HTML clean while allowing you to create attractive designs. They are widely used for quotes, buttons, image overlays, custom bullets, highlighted text, and decorative effects without writing additional HTML.

Common CSS Pseudo Elements

::before

Inserts content before an element.

Icons, symbols

::after

Inserts content after an element.

Labels, decorations

::first-letter

Styles only the first letter.

Articles, magazines

::first-line

Styles only the first line.

Paragraphs

::selection

Styles highlighted text.

Custom text selection

Basic Pseudo Element Syntax

<!DOCTYPE html>
<html>

<head>

<style>

p::first-letter{

    color:red;

    font-size:40px;

}

</style>

</head>

<body>

<p>

Learning CSS is fun!

</p>

</body>

</html>

Step 1: Using ::before

The ::before pseudo element inserts content before an element. The content property is required.

<!DOCTYPE html>
<html>

<head>

<style>

h2::before{

    content:"★ ";

    color:orange;

}

</style>

</head>

<body>

<h2>

Featured Article

</h2>

</body>

</html>

Step 2: Using ::after

The ::after pseudo element inserts content after an element.

<!DOCTYPE html>
<html>

<head>

<style>

h2::after{

    content:" ✔";

    color:green;

}

</style>

</head>

<body>

<h2>

Article Published

</h2>

</body>

</html>

Step 3: Using ::first-letter

The ::first-letter pseudo element styles only the first letter of a block of text.

<!DOCTYPE html>
<html>

<head>

<style>

p::first-letter{

    color:#007BFF;

    font-size:40px;

    font-weight:bold;

}

</style>

</head>

<body>

<p>

CSS makes webpages beautiful and responsive.

</p>

</body>

</html>

Step 4: Using ::first-line

The ::first-line pseudo element styles only the first line of a paragraph.

<!DOCTYPE html>
<html>

<head>

<style>

p::first-line{

    color:red;

    font-weight:bold;

}

</style>

</head>

<body>

<p>

CSS allows developers to create beautiful websites with responsive layouts and
modern user interfaces. Resize the preview window to see how the first line
changes.

</p>

</body>

</html>

Step 5: Using ::selection

The ::selection pseudo element changes the appearance of text selected by the user.

<!DOCTYPE html>
<html>

<head>

<style>

::selection{

    background:#007BFF;

    color:white;

}

</style>

</head>

<body>

<p>

Select this paragraph using your mouse to see the custom selection color.

</p>

</body>

</html>

Complete CSS Pseudo Elements Example

<!DOCTYPE html>
<html>

<head>

<style>

h1::before{

    content:"🔥 ";

}

h1::after{

    content:" 🔥";

}

p::first-letter{

    font-size:42px;

    color:#007BFF;

    font-weight:bold;

}

::selection{

    background:black;

    color:white;

}

</style>

</head>

<body>

<h1>

Academic Block

</h1>

<p>

CSS pseudo elements allow you to style specific parts of an element without
adding extra HTML tags.

</p>

</body>

</html>

Advantages of CSS Pseudo Elements

Cleaner HTML

Less Markup

Adds visual content without extra HTML elements.

Better Design

Professional Look

Creates decorative effects easily.

Easy Styling

Flexible

Styles only specific parts of an element.

Improved UX

Interactive

Enhances readability and text selection.

Best Practices

Use pseudo elements to keep HTML clean and simple.
Always include the content property with ::before and ::after.
Use pseudo elements for decorative content, not important information.
Prefer the modern double-colon (::) syntax.
Keep decorative effects consistent throughout your website.
Test text selection colors for readability.
Avoid inserting large amounts of content using pseudo elements.
Combine pseudo elements with pseudo classes for advanced UI effects.

Web Resources on CSS Pseudo Elements

1. MDN Web Docs : Pseudo-elements
2. Web.dev : Pseudo-elements
3. CSS Tricks.com : A Little Reminder That Pseudo Elements are Children
4. Dev.to : Must-Know CSS Pseudo-elements

🧪 Test Your CSS Code

Edit the CSS code on the left and click “Run Code” to see the result on the right.

📝 CSS Code

👁️ Preview (HTML rendered with your CSS)

Click “Run Code” to see the result here.