CSS Pseudo-elements

By /

In this chapter, you will learn about CSS Pseudo-elements. Pseudo-elements allow you to style a specific part of an element or add content before or after an element using CSS. For example, you can style the first letter of a paragraph, change the first line, or add decorative content without writing extra HTML. Let’s understand the important CSS Pseudo-elements step by step.

What is a CSS Pseudo-element?

A pseudo-element allows you to style a specific part of an element.

Pseudo-elements usually use two colons (::).

For example:

p::first-letter {
  color: blue;
}

This selects and styles only the first letter of a paragraph.

Some commonly used pseudo-elements are:

  • ::first-letter
  • ::first-line
  • ::before
  • ::after
  • ::selection
  • ::marker
  • ::placeholder

1. The ::first-letter Pseudo-element

The ::first-letter pseudo-element selects the first letter of a text element. It is often used to create a decorative first letter.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS First Letter</title>

  <style>
    p::first-letter {
      color: blue;
      font-size: 40px;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <p>
    CSS allows you to style webpages in different ways.
  </p>

</body>
</html>

Only the first letter of the paragraph becomes larger, bold, and blue.

2. The ::first-line Pseudo-element

The ::first-line pseudo-element selects the first line of text inside an element.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS First Line</title>

  <style>
    p {
      width: 400px;
      font-size: 18px;
    }

    p::first-line {
      color: blue;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <p>
    CSS makes it possible to control the appearance of a webpage.
    You can change colors, fonts, spacing, layouts, and many other
    design properties using CSS.
  </p>

</body>
</html>

Only the first visible line of the paragraph receives the styles. The exact first line can change if the width of the element changes.

3. The ::before Pseudo-element

The ::before pseudo-element adds content before the content of an element. It is commonly used for:

  • Icons
  • Decorative shapes
  • Labels
  • Small design elements

When using ::before, you usually need the content property.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Before</title>

  <style>
    p::before {
      content: "Note: ";
      color: blue;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <p>
    CSS Pseudo-elements are useful for styling parts of an element.
  </p>

</body>
</html>

The text Note: is added before the paragraph content. You can also use ::before to create decorative elements.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Before Decoration</title>

  <style>
    h1::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 30px;
      background-color: blue;
      margin-right: 10px;
      vertical-align: middle;
    }
  </style>
</head>

<body>

  <h1>CSS Pseudo-elements</h1>

</body>
</html>

Here, ::before creates a small blue shape before the heading.

4. The ::after Pseudo-element

The ::after pseudo-element adds content after the content of an element.

Like ::before, it usually requires the content property.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS After</title>

  <style>
    p::after {
      content: " ✓";
      color: green;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <p>
    Your task is complete
  </p>

</body>
</html>

The check mark appears after the paragraph text.

5. Creating Decorative Elements with ::after

Pseudo-elements are often used to create decorative effects without adding extra HTML elements.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS After Decoration</title>

  <style>
    h2 {
      position: relative;
      display: inline-block;
    }

    h2::after {
      content: "";
      display: block;
      width: 50%;
      height: 4px;
      background-color: blue;
      margin-top: 5px;
    }
  </style>
</head>

<body>

  <h2>Latest Courses</h2>

</body>
</html>

The ::after pseudo-element creates a line below the heading.

6. The ::selection Pseudo-element

The ::selection pseudo-element styles text when a user selects it.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Selection</title>

  <style>
    ::selection {
      background-color: blue;
      color: white;
    }
  </style>
</head>

<body>

  <h1>Select This Text</h1>

  <p>
    Try selecting this text with your mouse.
  </p>

</body>
</html>

When the user selects text, it appears with the specified colors. You can also apply ::selection to a specific element.

For example:

p::selection {
  background-color: yellow;
  color: black;
}

7. The ::marker Pseudo-element

The ::marker pseudo-element styles the marker of list items. This can be a bullet point or a number.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Marker</title>

  <style>
    li::marker {
      color: blue;
      font-size: 24px;
    }
  </style>
</head>

<body>

  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>

</body>
</html>

Only the list markers are styled.

8. The ::placeholder Pseudo-element

The ::placeholder pseudo-element styles placeholder text inside form fields.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Placeholder</title>

  <style>
    input {
      padding: 12px;
      font-size: 16px;
    }

    input::placeholder {
      color: gray;
      font-style: italic;
    }
  </style>
</head>

<body>

  <input
    type="text"
    placeholder="Enter your name"
  >

</body>
</html>

The placeholder text now has a different style.

9. ::before and ::after with Positioning

You can use pseudo-elements with positioning to create more interesting designs. For example, you can add a small badge to an element.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Before and After</title>

  <style>
    .box {
      position: relative;
      width: 250px;
      padding: 30px;
      background-color: lightblue;
    }

    .box::after {
      content: "New";
      position: absolute;
      top: -10px;
      right: -10px;
      padding: 5px 10px;
      background-color: blue;
      color: white;
    }
  </style>
</head>

<body>

  <div class="box">
    CSS Pseudo-elements
  </div>

</body>
</html>

The ::after pseudo-element creates a New badge without adding another HTML element.

::before and ::after work best for decorative or generated content. Important information should usually be written in the HTML.

Quick Recap

  • Pseudo-elements style a specific part of an element or create generated content.
  • Pseudo-elements usually use two colons (::).
  • ::first-letter styles the first letter of an element.
  • ::first-line styles the first visible line.
  • ::selection styles selected text.
  • ::marker styles list markers.
  • ::placeholder styles placeholder text.
  • Pseudo-elements can also create decorative effects without extra HTML.

Mini Quiz

0%

CSS - QUIZ 28

1 / 5

Q1. What does a CSS pseudo-element allow you to style?

2 / 5

Q2. Which pseudo-element styles only the first letter of a text element?

3 / 5

Q3. What is the main difference between ::before and ::after?

4 / 5

Q4. Which pseudo-element is used to style the bullet point or number of a list item?

5 / 5

Q5. Which pseudo-element would you use to style the text shown inside an empty input field before the user enters a value?

Your score is

The average score is 0%

0%

By Wordpress Quiz plugin

Mini Project

Mini Project: Book Preview Card

Question:

Create a book preview section that uses CSS pseudo-elements to add decorative content, highlight parts of the text, style the list markers, and customize the search field placeholder.

Requirements

  • Add a book title, description, and a short list of book features.
  • Make the first letter of the description visually prominent.
  • Add a small decorative label before the book title.
  • Add a decorative line after the title.
  • Style the list markers to match the design.
  • Add a search field with customized placeholder text.
  • Change the appearance of selected text in the book description.
  • Add a small New badge to the book card without adding another HTML element for it.
View Answer Code
<!DOCTYPE html>
<html>
<head>
  <title>Book Preview</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f3f4f6;
      margin: 0;
      padding: 40px 20px;
      color: #1f2937;
    }

    .book {
      max-width: 500px;
      margin: auto;
      padding: 30px;
      background-color: white;
      border-radius: 12px;
      position: relative;
    }

    .book::after {
      content: "New";
      position: absolute;
      top: -10px;
      right: -10px;
      padding: 6px 12px;
      background-color: #2563eb;
      color: white;
      border-radius: 5px;
      font-size: 14px;
    }

    h1 {
      margin-top: 0;
      display: inline-block;
    }

    h1::before {
      content: "Book Pick: ";
      color: #2563eb;
      font-size: 14px;
    }

    h1::after {
      content: "";
      display: block;
      width: 60%;
      height: 4px;
      background-color: #2563eb;
      margin-top: 8px;
    }

    .description {
      line-height: 1.7;
    }

    .description::first-letter {
      font-size: 45px;
      font-weight: bold;
      color: #2563eb;
    }

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

    .description::selection {
      background-color: #2563eb;
      color: white;
    }

    .features {
      padding-left: 25px;
    }

    .features li::marker {
      color: #2563eb;
      font-size: 20px;
    }

    .search {
      margin-top: 25px;
    }

    .search input {
      width: 90%;
      padding: 12px;
      border: 2px solid #d1d5db;
      border-radius: 6px;
      font-size: 15px;
      outline: none;
    }

    .search input::placeholder {
      color: #6b7280;
      font-style: italic;
    }
  </style>
</head>

<body>

  <div class="book">

    <h1>The Hidden Library</h1>

    <p class="description">
      A young reader discovers a forgotten library filled with mysterious
      stories, unusual maps, and secrets waiting to be found.
    </p>

    <h2>Inside the Book</h2>

    <ul class="features">
      <li>Mystery and adventure</li>
      <li>Hidden clues</li>
      <li>Unexpected discoveries</li>
      <li>Short engaging chapters</li>
    </ul>

    <div class="search">
      <input
        type="text"
        placeholder="Search for another book"
      >
    </div>

  </div>

</body>
</html>

Frequently Asked Questions (FAQs)

Q1. What are CSS Pseudo-elements?

CSS Pseudo-elements allow you to style specific parts of an element or add generated content using CSS without adding extra HTML elements.

Q2. What are CSS Pseudo-elements used for?

CSS Pseudo-elements are used to style specific parts of an element or add decorative content without adding extra HTML elements.

Q3. Do CSS Pseudo-elements use one colon or two colons?

CSS Pseudo-elements usually use two colons (::), such as ::before and ::after.

Q4. What is the difference between CSS Pseudo-classes and Pseudo-elements?

CSS Pseudo-classes style an element based on its state or position, while CSS Pseudo-elements style a specific part of an element or add generated content.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top