• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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.

← Previous Next →

CSS

online coding class codepractice

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)

codepractice logo
Login
Go Back Top