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.

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