• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Pseudo-elements

← Previous Next →

🔹 What Are CSS Pseudo-elements?

CSS pseudo-elements allow you to style specific parts of an element without adding extra HTML tags. You can insert content, style specific letters or lines, and more.

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

🔸 Common Pseudo-elements

Pseudo-element Description
::before Inserts content before the element's content
::after Inserts content after the element's content
::first-letter Targets the first letter of text inside element
::first-line Targets the first line of text
::selection Styles text when highlighted by user
::marker Styles bullets or numbers in lists (modern support)
🔸 1. ::before Example
h1::before {
  content: "👉 ";
}

Adds content before <h1> without changing the HTML.

🔸 2. ::after Example
p::after {
  content: " ✔️";
  color: green;
}

Adds a green checkmark after every <p>.

🔸 3. ::first-letter Example
p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

Enlarges the first letter of a paragraph (like in magazines).

🔸 4. ::first-line Example
p::first-line {
  color: red;
}

Styles the first visible line of text in a paragraph.

🔸 5. ::selection Example
::selection {
  background-color: yellow;
  color: black;
}

Applies when user selects/highlights text.

🔸 6. ::marker (for lists)
ul li::marker {
  color: red;
  font-size: 20px;
}

Styles the bullet or number in a list.

💡 ::before and ::after require content property.

Practice Questions

Q1. Add a star symbol before all <h2> headings.

Q2. Insert a checkmark after each <li>.

Q3. Style the first letter of a paragraph to be larger and bold.

Q4. Change color of first line in a <p> to blue.

Q5. Highlight user-selected text with pink background.

Q6. Make bullets in <ul> red and larger.

Q7. Append a copyright symbol after footer text.

Q8. Prefix "Note:" before every <blockquote>.

Q9. Italicize only the first line of a quote.

Q10. Add an emoji after all links.

CSS Pseudo-elements Quiz

Q1: Which pseudo-element inserts content before an element?

A. ::before
B. ::insert
C. :before
D. ::start

Q2: Which pseudo-element targets the first letter of text?

A. ::init-letter
B. ::first-letter
C. ::first
D. :letter

Q3: Which property must be used with ::before or ::after?

A. content
B. display
C. position
D. visibility

Q4: What does ::selection do?

A. Adds buttons
B. Styles selected text
C. Adds border
D. Applies hover

Q5: How to style the first line of a paragraph?

A. ::first-word
B. ::first-line
C. ::start-line
D. :line

Q6: Which is a valid pseudo-element selector?

A. p::after
B. p::insert
C. p:aftertext
D. p:post

Q7: Which pseudo-element styles list markers (bullets/numbers)?

A. ::bullet
B. ::marker
C. ::list-style
D. ::prefix

Q8: Which pseudo-element would be used to create a drop cap effect?

A. ::first-line
B. ::first-letter
C. ::drop
D. ::font

Q9: Which of the following can you use to insert icons without HTML?

A. ::before with content
B. :hover
C. ::init
D. ::icon

Q10: What will a::after { content: "🔗"; } do?

A. Add background
B. Add link icon after each anchor tag
C. Hide link
D. Add margin
← Previous Next →
Login
Go Back Top