PSEUDO-ELEMENTS

Decorative effects on a website are not always large images or bright visual blocks.

Sometimes they are very small and simple details, for example:

• dots
• quotation marks
• lines
• icons
• small decorative shapes before or after text

Very often, these decorative elements need to appear exactly:

• before an element
• or after an element

For that, CSS uses pseudo-elements.

1. What Pseudo-elements Are

Pseudo-elements let us add decorative parts to an element without creating extra empty tags in HTML.

The two most common pseudo-elements are:

• ::before
• ::after

They are used to create decorative content connected to an existing element.

Main idea:

• ::before creates something at the beginning of the element
• ::after creates something at the end of the element

So instead of adding extra <span> or <div> tags only for decoration, we can use pseudo-elements in CSS.

2. ::before and ::after

::before creates a pseudo-element before all the content of an element.

::after creates a pseudo-element after all the content of an element.

Basic Structure

.box {
  /* element styles */
}

.box::before {
  /* styles for the before pseudo-element */
}

.box::after {
  /* styles for the after pseudo-element */
}

This means:

• .box styles the real element
• .box::before styles the decorative part before the content
• .box::after styles the decorative part after the content

3. Default Behavior

By default, pseudo-elements are inline elements.

That means:

• they behave like text
• they do not naturally have block layout behavior

So if you want a pseudo-element to have:

• width
• height
• vertical spacing
• block-like geometry

you usually need to change its display type.

Common options:

• display: block
• display: inline-block

Example

.box::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background-color: orange;
}

Here the pseudo-element becomes a small decorative line.

4. The content Property

The content property is required for ::before and ::after.

Without content, the browser does not create the pseudo-element.

This is one of the most important rules.

Example

.box::before {
  content: "Hello";
}

Here is the exmaple. I created div number:2,3,4,5,6. Ihave not created div number 1 and numbet 7. I used before and after pseudo-elements. Now it is looking as div1 and 7 are exist, but not it looks the same, thanks to css and pseudo-elements

Here is the code:

<div class="exercise1-pseudo-elements">
  <div class="parent-box-pseudo-elements">
    <div class="second-box-pseudo-elements">Second</div>
    <div class="third-box-pseudo-elements">Third</div>
    <div class="fourth-box-pseudo-elements">Fourth</div>
    <div class="fifth-box-pseudo-elements">Fifth</div>
    <div class="sixth-box-pseudo-elements">Sixth</div>
  </div>

  <style>
    .parent-box-pseudo-elements {
      display: flex;
      gap: 10px;
    }

    .second-box-pseudo-elements::before {
      content: "First";
      margin-right: 10px;
    }

    .sixth-box-pseudo-elements::after {
      content: "Seventh";
      margin-left: 10px;
    }
  </style>
</div>

If no text content is needed, use an empty string:

.box::before {
  content: "";
}

This creates the pseudo-element, even though it does not contain visible text.

So:

• content: "Text"; creates a pseudo-element with text
• content: ""; creates an empty pseudo-element for decoration

5. Example with HTML

HTML:

<div class="box">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia itaque quia
  nobis fugit amet adipisci, corrupti animi, iusto eius a sed totam voluptas
  porro. Dolorem aliquid rerum magnam eligendi aspernatur.
</div>

CSS example:

.box::before {
  content: "“";
  font-size: 30px;
  color: orange;
}

.box::after {
  content: "”";
  font-size: 30px;
  color: teal;
}

What happens:

• a decorative opening quote appears before the text
• a decorative closing quote appears after the text

This is useful for quote blocks or decorative typography.

6. Where Pseudo-elements Are Used

Pseudo-elements are mainly used for decorative effects.

Common examples:

• decorative quotation marks
• lines before or after headings
• dots or icons
• labels
• overlays
• custom markers
• simple shapes

Example

.title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: currentColor;
  margin-top: 8px;
}

Meaning:

• add a decorative line under the title
• without extra HTML

7. Important Selector Rule

In one selector, you can use only one pseudo-element.

And it must come after a simple selector such as:

• tag
• class
• id

Correct:

.box::before {
  content: "";
}

Also correct:

p.note::after {
  content: "";
}

Not correct:

.box::before::after {
  content: "";
}

Why?

Because one selector cannot target two pseudo-elements in a chain like that.

8. Shared Styles for ::before and ::after

Sometimes we want both pseudo-elements to share the same styles.

Wrong way:

.box::before::after {
  font-size: 30px;
}

This is incorrect.

Correct way:

.box::before,
.box::after {
  font-size: 30px;
}

Then we can define separate content and colors:

.box::before {
  content: "This text is in before";
  color: orange;
}

.box::after {
  content: "This text is in after";
  color: teal;
}

This is the proper pattern:

• shared styles in one grouped rule
• unique styles in separate rules

9. Full Example

HTML:

<div class="box">
  Decorative pseudo-elements example
</div>

CSS:

.box {
  padding: 20px;
  border: 1px solid #ccc;
}

.box::before,
.box::after {
  font-size: 30px;
}

.box::before {
  content: "«";
  color: orange;
  margin-right: 8px;
}

.box::after {
  content: "»";
  color: teal;
  margin-left: 8px;
}

What happens:

• decorative marks appear before and after the text
• no extra HTML tags are needed
• styles stay clean and simple

10. Empty Decorative Pseudo-elements

Very often pseudo-elements do not contain text at all.

Instead, they are used as empty decorative blocks.

Example

.button::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  margin-right: 8px;
}

Meaning:

• create a small red circle before the button text

This is a very common pattern.

Another example:

.card::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ddd;
  margin-top: 16px;
}

Meaning:

• create a decorative line after the card content

11. Why Pseudo-elements Are Useful

Pseudo-elements are useful because they:

• reduce unnecessary HTML
• keep decorative logic in CSS
• make markup cleaner
• help create small visual effects easily

Instead of this:

<div class="title">
  <span class="decor-line"></span>
  Heading
</div>

we can often do this:

.title::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background: black;
}

So the HTML stays simpler.

12. Important Warning

Do not use pseudo-elements to add real textual content.

Pseudo-elements are intended only for decorative effects.

Why is this important?

Because text inside pseudo-elements:

• is not reliably recognized by assistive technologies
• may not be treated as real content by search engines
• may disappear completely if the stylesheet fails to load

So if the text is important for meaning, it should be written in HTML, not in ::before or ::after.

Good use:

• decorative quote marks
• visual dots
• lines
• purely decorative labels

Bad use:

• important instructions
• product information
• meaningful headings
• content users must read

13. Good and Bad Examples

Good example:

.quote::before {
  content: "“";
  color: gray;
}

Why good?

Because the quote mark is decorative.

Bad example:

.price::before {
  content: "Special offer: ";
  color: red;
}

Why bad?

Because "Special offer" is meaningful text and should be in HTML.

Correct version:

<p class="price">Special offer: $19</p>

Then CSS can style it normally.

14. Practical Examples

Example 1. Decorative dot before text

.list-item::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: black;
  border-radius: 50%;
  margin-right: 8px;
}

Meaning:

• create a small black dot before each list item

Example 2. Decorative line after heading

.heading::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background-color: orange;
  margin-top: 10px;
}

Meaning:

• create a short line below the heading

Example 3. Quotation marks around text

.quote::before {
  content: "“";
}

.quote::after {
  content: "”";
}

Meaning:

• add decorative quotation marks around the quote

15. Short Summary

::before

• creates a pseudo-element before the content

::after

• creates a pseudo-element after the content

content

• is required
• without it, the pseudo-element does not exist

Default behavior:

• pseudo-elements are inline by default

If you need size or block-like shape:

• use display: block
• or display: inline-block

Main use:

• decorative effects without extra HTML

16. Mini Cheat Sheet

::before   -> before the content
::after    -> after the content
content    -> required
""         -> empty decorative pseudo-element
display:block / inline-block -> gives size and geometry

17. Very Short Practical Rules

Use pseudo-elements for decoration, not for real content.
Always remember: no content = no pseudo-element.

18. Common Mistakes

Mistake 1: Forgetting content.

Problem: the pseudo-element will not appear.

Mistake 2: Trying to give width and height to a default inline pseudo-element.

Problem: it may not behave as expected.

Solution: use display: block or display: inline-block.

Mistake 3: Using pseudo-elements for meaningful text.

Problem: that text is not dependable as real content.

Mistake 4: Trying to write:

.box::before::after

Problem: this is invalid for shared styling.

Solution: write:

.box::before,
.box::after

19. Final Summary

Pseudo-elements ::before and ::after let us add decorative effects before or after an element without creating extra tags in HTML.

They are very useful for:

• dots
• quotation marks
• lines
• icons
• small decorative shapes

Important things to remember:

• ::before goes before the content
• ::after goes after the content
• content is required
• pseudo-elements are inline by default
• use them for decoration, not for meaningful text

Super short memory line:

::before = before, ::after = after, content = required, pseudo-elements = decoration only