CSS · Selectors & States

Pseudo-Elements

Style specific parts of elements or add decorative content

Find videos you like?

Save to resource drawer for future reference!

CSS Pseudo-Elements

Style parts of elements

Pseudo-Elements = Virtual Elements

Pseudo-elements let you style specific parts of elements or insert content without adding HTML. They use double colons ::

Pseudo-Classes :

Select elements in certain states

button:hover

Pseudo-Elements ::

Style specific parts of elements

p::first-letter

Common Pseudo-Elements

The four most-used pseudo-elements

::before

Icons, quotes, decorations

Insert content before element

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

::after

Tooltips, badges, arrows

Insert content after element

a::after { content: " →"; }

::first-letter

Drop caps, magazine style

Style first letter of text

p::first-letter { font-size: 2em; }

::first-line

Emphasis, article intros

Style first line of text

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

Interactive Demo

See pseudo-elements in action

Pseudo-Elements Examples

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>✨ Pseudo-Elements</h1>
      <div class="label">::first-letter (Drop Cap)</div>
      <p class="drop-cap">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Notice how the first letter is much larger and styled differently.
        This is called a drop cap and is commonly used in magazines and books.
      </p>
      <div class="label">::first-line (Bold First Line)</div>
      <p class="intro">
        This entire first line is bold and larger.
        The rest of the paragraph continues with normal styling.
        This is great for introductions and article openings.
      </p>
      <div class="label">::before & ::after (Quotation Marks)</div>
      <div class="quote">
        CSS pseudo-elements are powerful tools that let you add style and
        content without cluttering your HTML. Master them for cleaner code!
      </div>
      <div class="label">::after (Animated Arrow)</div>
      <p>
        <a href="#" class="fancy-link">Hover over this link</a> to see the arrow animation!
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

The content Property

Required for ::before and ::after

The content property is required for ::before and ::after pseudo-elements.

Common Values

content: "text";Insert text

content: "";Empty (for decorative shapes)

content: attr(href);Use attribute value

content: url(icon.png);Insert image

Remember

Pseudo-elements use double colon ::

::before and ::after require content property

::first-letter great for drop caps

Use for decorative content that shouldn't be in HTML

Previous Topic

Pseudo-classes

:hover, :focus, :active, :visited, :nth-child, :nth-of-type, :first-child, :last-child, :only-child.

Next Topic

Flexbox

Flex containers, flex items, flex-direction, flex-wrap, flex-grow/shrink/basis, gap, alignment properties.

Ask a Question

Have a question about Pseudo-elements? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Selectors & States

Pseudo-Elements

Style specific parts of elements or add decorative content

Find videos you like?

Save to resource drawer for future reference!

CSS Pseudo-Elements

Style parts of elements

Pseudo-Elements = Virtual Elements

Pseudo-elements let you style specific parts of elements or insert content without adding HTML. They use double colons ::

Pseudo-Classes :

Select elements in certain states

button:hover

Pseudo-Elements ::

Style specific parts of elements

p::first-letter

Common Pseudo-Elements

The four most-used pseudo-elements

::before

Icons, quotes, decorations

Insert content before element

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

::after

Tooltips, badges, arrows

Insert content after element

a::after { content: " →"; }

::first-letter

Drop caps, magazine style

Style first letter of text

p::first-letter { font-size: 2em; }

::first-line

Emphasis, article intros

Style first line of text

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

Interactive Demo

See pseudo-elements in action

Pseudo-Elements Examples

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>✨ Pseudo-Elements</h1>
      <div class="label">::first-letter (Drop Cap)</div>
      <p class="drop-cap">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Notice how the first letter is much larger and styled differently.
        This is called a drop cap and is commonly used in magazines and books.
      </p>
      <div class="label">::first-line (Bold First Line)</div>
      <p class="intro">
        This entire first line is bold and larger.
        The rest of the paragraph continues with normal styling.
        This is great for introductions and article openings.
      </p>
      <div class="label">::before & ::after (Quotation Marks)</div>
      <div class="quote">
        CSS pseudo-elements are powerful tools that let you add style and
        content without cluttering your HTML. Master them for cleaner code!
      </div>
      <div class="label">::after (Animated Arrow)</div>
      <p>
        <a href="#" class="fancy-link">Hover over this link</a> to see the arrow animation!
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

The content Property

Required for ::before and ::after

The content property is required for ::before and ::after pseudo-elements.

Common Values

content: "text";Insert text

content: "";Empty (for decorative shapes)

content: attr(href);Use attribute value

content: url(icon.png);Insert image

Remember

Pseudo-elements use double colon ::

::before and ::after require content property

::first-letter great for drop caps

Use for decorative content that shouldn't be in HTML

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Pseudo-classes

Flexbox

Building Your Learning Module...

Pseudo-Elements

Pseudo-Elements = Virtual Elements

Pseudo-Classes :

Pseudo-Elements ::

Pseudo-Elements Examples

Common Values

Remember

Pseudo-classes

Flexbox

Pseudo-Elements

Pseudo-Elements = Virtual Elements

Pseudo-Classes :

Pseudo-Elements ::

Pseudo-Elements Examples

Common Values

Remember