CssHow-ToBeginner · 3 min read

How to Add Content Using ::before and ::after in CSS

Use the CSS pseudo-elements ::before and ::after with the content property to insert content before or after an element's content. These pseudo-elements let you add text or symbols without changing the HTML. Remember to set content to a string or empty quotes to make them appear.

📐

Syntax

The ::before and ::after pseudo-elements let you insert content before or after an element's actual content. You must use the content property to specify what to add. Without content, nothing will show.

selector::before { content: 'text'; } adds content before the element.
selector::after { content: 'text'; } adds content after the element.

You can add text, symbols, or even empty strings for styling.

css

/* Syntax for adding content before and after an element */
selector::before {
  content: 'Your text here';
}

selector::after {
  content: 'Your text here';
}

💻

Example

This example shows how to add quotes before and after a blockquote using ::before and ::after. The quotes appear visually without changing the HTML.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Before and After Example</title>
<style>
blockquote {
  font-style: italic;
  position: relative;
  padding: 1rem 1.5rem;
  margin: 2rem;
  border-left: 4px solid #555;
}

blockquote::before {
  content: '“';
  font-size: 3rem;
  position: absolute;
  left: 10px;
  top: 0;
  color: #999;
}

blockquote::after {
  content: '”';
  font-size: 3rem;
  position: absolute;
  right: 10px;
  bottom: 0;
  color: #999;
}
</style>
</head>
<body>
<blockquote>
  CSS makes it easy to add content before and after elements.
</blockquote>
</body>
</html>

Output

A blockquote with large gray opening and closing quotation marks visually added before and after the text.

⚠️

Common Pitfalls

Forgetting to set the content property means nothing will show.
Using single colon :before or :after still works but double colon ::before and ::after is the modern standard.
Trying to add content to elements that cannot have children (like input) will not work.
Not setting display or positioning can cause the added content to not appear as expected.

css

/* Wrong: no content property, nothing shows */
div::before {
  color: red;
}

/* Right: content property added */
div::before {
  content: 'Note: ';
  color: red;
}

📊

Quick Reference

Remember these key points when using ::before and ::after:

Always use the content property to add text or symbols.
Use position and display styles to control placement and visibility.
These pseudo-elements do not change the HTML structure, only the visual output.
They work best on elements that can contain other elements or text.

✅

Key Takeaways

Use ::before and ::after with the content property to add text or symbols around elements.

Always set content to a string or empty quotes to make the pseudo-element appear.

Double colon (::) syntax is the modern standard for pseudo-elements.

These pseudo-elements only affect visual output, not the HTML structure.

Set display and positioning styles to control how added content looks and where it appears.