Tutorials


CSS ::after property


The ::after pseudo-element in CSS is used to insert content after the content of an element. This pseudo-element allows you to add decorative or additional content following the actual content of an element, without altering the HTML structure.

Syntax

selector::after {
  content: "text or value";
  /* Other styles */
}
  • selector: The element to which you want to add content.
  • ::after: The pseudo-element that inserts content after the content of the selected element.
  • content: Specifies what content to insert. This property is required for ::after to function.

How It Works

  1. Basic Usage:

    • The content property defines the content to be inserted after the element's content. It can be text, images, or other values.
    .example::after {
  content: " (Read more)";
  color: blue;
}
    • In this example, the text " (Read more)" will appear after the content of any element with the class .example.

  2. Inserting Images:

    • You can use ::after to insert images by setting the content property to url().
    .icon::after {
  content: url('icon.png');
}
    • This example inserts an image after the content of elements with the class .icon.

  3. Using with Other Properties:

    • You can style the inserted content with CSS properties like color, font-size, margin, and padding.
    .highlight::after {
  content: " [Highlighted]";
  color: orange;
  font-weight: bold;
}
    • This example adds " [Highlighted]" after the content of elements with the class .highlight and styles it with orange color and bold text.

  4. Adding Decorative Content:

    • ::after can be used to add decorative elements such as icons, symbols, or additional text.
    .checkmark::after {
  content: "✔";
  color: green;
  margin-left: 5px;
}
    • This example adds a checkmark symbol after the content of elements with the class .checkmark and styles it with green color and margin.

Examples

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>After Pseudo-element Example</title>
  <style>
    .note::after {
      content: " (Note)";
      color: red;
    }

    .icon::after {
      content: url('icon.png');
    }

    .highlight::after {
      content: " [Highlighted]";
      color: orange;
      font-weight: bold;
    }

    .checkmark::after {
      content: "✔";
      color: green;
      margin-left: 5px;
    }
  </style>
</head>
<body>
  <p class="note">This is a note.</p>
  <p class="icon">Icon content.</p>
  <p class="highlight">This is highlighted.</p>
  <p class="checkmark">Task completed.</p>
</body>
</html>

Explanation:

  • .note::after:

    • Adds " (Note)" after the content of <p> elements with the class .note and styles it in red.

  • .icon::after:

    • Inserts an image after the content of <p> elements with the class .icon.

  • .highlight::after:

    • Adds " [Highlighted]" after the content of <p> elements with the class .highlight and styles it with orange color and bold font.

  • .checkmark::after:

    • Inserts a green checkmark symbol after the content of <p> elements with the class .checkmark and adds margin for spacing.

Important Points

  1. Content Property:

    • The content property is required for ::after to work. Without it, the pseudo-element will not be rendered.

  2. Inline-Level Element:

    • The ::after pseudo-element is inline by default. You can change its display property to block or inline-block if needed.
    .example::after {
  content: " - End";
  display: block;
  margin-top: 10px;
}

  3. No Direct DOM Manipulation:

    • ::after does not modify the DOM. It only affects how content is rendered visually.

  4. Combined with ::before:

    • ::after is often used in conjunction with ::before to add content both before and after the element's content.
    .example::before {
  content: "Start - ";
}

.example::after {
  content: " - End";
}
    • This example adds text both before and after the content of elements with the class .example.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about