Tutorials


CSS ::before property


The ::before pseudo-element in CSS is used to insert content before the content of an element. This pseudo-element allows you to add decorative content or stylistic elements before the actual content of the element, without modifying the HTML.

Syntax

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

How It Works

  1. Basic Usage:

    • The content property defines the content to be inserted. It can be text, images, or other values.
    .example::before {
  content: "Note: ";
  color: red;
}
    • In this example, the text "Note: " will appear before the content of any element with the class .example.

  2. Inserting Images:

    • You can use ::before to insert images by setting the content property to url().
    .icon::before {
  content: url('icon.png');
}
    • This example inserts an image before 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::before {
  content: "[Important] ";
  color: orange;
  font-weight: bold;
}
    • This example adds "[Important] " before the content of elements with the class .highlight and styles it with orange color and bold text.

  4. Adding Decorative Content:

    • You can use ::before to add decorative elements such as icons or symbols.
    .checkmark::before {
  content: "✔";
  color: green;
  margin-right: 5px;
}
    • This example adds a checkmark symbol before 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>Before Pseudo-element Example</title>
  <style>
    .note::before {
      content: "Note: ";
      color: red;
    }

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

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

    .checkmark::before {
      content: "✔";
      color: green;
      margin-right: 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::before:

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

  • .icon::before:

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

  • .highlight::before:

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

  • .checkmark::before:

    • Inserts a green checkmark symbol before 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 ::before to work. If content is not specified, the pseudo-element will not be rendered.

  2. Inline-Level Element:

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

  3. No Direct DOM Manipulation:

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

  4. Combined with ::after:

    • ::before is often used in conjunction with ::after 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