CSS Pseudo Elements Practice Questions with Solutions

By /

Introduction

CSS pseudo-elements allow you to style specific parts of an element without adding extra HTML. They can insert content before or after an element, style the first letter or first line of text, and customize selected text. Pseudo-elements help create attractive and clean web designs with less HTML. In this chapter, you’ll practice CSS pseudo-elements through simple solved questions that are easy for beginners to understand. CSS Pseudo Elements Practice questions with solutions help to understand the concepts.

Question 1: Add Content Before a Paragraph

Problem Statement

Write CSS to display the word “Note: “ before every paragraph.

CSS Code

p::before {    content: "Note: ";}

Output

Every paragraph begins with the text “Note: “ before its original content.

Explanation

  • ::before inserts content before an element.
  • The content property is required.
  • It is commonly used for icons, labels, and decorative text.

Question 2: Add Content After a Heading

Problem Statement

Write CSS to display a star symbol after every <h2> heading.

CSS Code

h2::after {    content: " ★";}

Output

A ★ symbol appears after every <h2> heading.

Explanation

  • ::after inserts content after an element.
  • The content property defines what will be displayed.
  • It is useful for badges, labels, and decorative symbols.

Question 3: Style the First Letter of a Paragraph

Problem Statement

Write CSS to make the first letter of every paragraph larger.

CSS Code

p::first-letter {    font-size: 32px;}

Output

The first letter of each paragraph appears larger than the remaining text.

Explanation

  • ::first-letter selects only the first letter.
  • It is commonly used in magazines and news articles.
  • It creates a decorative opening effect.

Question 4: Style the First Line of a Paragraph

Problem Statement

Write CSS to make the first line of every paragraph bold.

CSS Code

p::first-line {    font-weight: bold;}

Output

Only the first line of each paragraph appears bold.

Explanation

  • ::first-line styles only the first visible line.
  • The number of words affected depends on the container width.
  • It is useful for emphasizing introductory text.

Question 5: Change the Color of Selected Text

Problem Statement

Write CSS to change the background and text color when the user selects text.

CSS Code

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

Output

Selected text displays a yellow background with black text.

Explanation

  • ::selection styles highlighted text.
  • It improves the reading experience.
  • It is commonly used to match a website’s color theme.

Question 6: Add an Icon Before a List Item

Problem Statement

Write CSS to display a check mark (✓) before every list item.

CSS Code

li::before {    content: "✓ ";    color: green;}

Output

Every list item begins with a green check mark (✓).

Explanation

  • ::before inserts content before the list item.
  • The content property defines the symbol.
  • This technique is commonly used for feature lists and checklists.

Question 7: Add a Check Mark After Completed Items

Problem Statement

Write CSS to display a check mark (✔) after elements with the class .completed.

CSS Code

.completed::after {    content: " ✔";    color: green;}

Output

A green check mark (✔) appears after every element with the .completed class.

Explanation

  • ::after inserts content after the selected element.
  • The content property is required.
  • It is useful for showing completed tasks or verified items.

Question 8: Style the First Letter of a Heading

Problem Statement

Write CSS to make the first letter of every <h1> heading red and larger.

CSS Code

h1::first-letter {    color: red;    font-size: 40px;}

Output

The first letter of each <h1> appears red and larger than the remaining text.

Explanation

  • ::first-letter targets only the first letter.
  • It creates a decorative heading style.
  • This effect is commonly used in magazines and creative websites.

Question 9: Highlight the First Line of an Article

Problem Statement

Write CSS to change the color of the first line of an <article>.

CSS Code

article::first-line {    color: blue;}

Output

Only the first line of the article displays blue text.

Explanation

  • ::first-line styles only the first visible line.
  • The styled text changes automatically if the container width changes.
  • It is useful for emphasizing introductory content.

Question 10: Create a Decorative Quote Using ::before

Problem Statement

Write CSS to display an opening quotation mark before every <blockquote> element.

CSS Code

blockquote::before {    content: "“";    font-size: 40px;}

Output

A large opening quotation mark appears before every blockquote.

Explanation

  • ::before inserts decorative content before the quote.
  • font-size increases the size of the quotation mark.
  • This technique creates a professional quote design.

Key Takeaways

  • Pseudo-elements style specific parts of an element.
  • ::before inserts content before an element.
  • ::after inserts content after an element.
  • ::first-letter styles the first letter.
  • ::first-line styles the first visible line.
  • ::selection styles highlighted text.
  • The content property is required for ::before and ::after.
  • Pseudo-elements help create attractive designs without adding extra HTML.

Frequently Asked Questions (FAQs)

1. What are CSS pseudo-elements?

CSS pseudo-elements allow you to style specific parts of an element or insert generated content without changing the HTML.

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

  • Pseudo-classes style an element based on its state or condition (such as :hover or :focus).
  • Pseudo-elements style part of an element or insert generated content (such as ::before or ::after).

3. Why is the content property required with ::before and ::after?

The content property tells the browser what text or symbol should be inserted. Without it, ::before and ::after will not display anything.

4. What does ::first-letter do?

::first-letter styles only the first letter of an element, such as changing its size or color.

5. What does ::first-line do?

::first-line styles only the first visible line of text inside an element.

6. What is ::selection used for?

::selection changes the appearance of text when the user highlights or selects it with the mouse.

7. Where are CSS pseudo-elements commonly used?

Pseudo-elements are commonly used for:

  • Decorative icons
  • Labels
  • Quotes
  • Feature lists
  • Drop caps
  • Custom text selection effects

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

Related Posts

Scroll to Top