::before

by

The ::before pseudo-element in CSS allows you to insert generated content before the content of an element. This is incredibly useful for adding decorative elements, icons, or other content without modifying the HTML structure.

Syntax

selector::before {
  /* CSS properties */
}

How it works

  1. Select an element: You target a specific HTML element using a CSS selector.
  2. Create a pseudo-element: The ::before pseudo-element creates a virtual element that is inserted before the content of the selected element.
  3. Apply styles: You apply CSS properties to the generated content to customize its appearance.

Common Use Cases

  • Adding icons: Inserting icons before text elements.
  • Creating custom bullets: Styling list items with custom bullet points.
  • Generating content: Creating content dynamically based on other elements.
  • Adding decorative elements: Adding borders, shadows, or other visual effects.

Example

<p>This is a paragraph.</p>
p::before {
  content: "★ ";
  color: gold;
  font-size: 24px;
}

This code will add a gold star before the text in the paragraph.

Important Properties

  • content: Specifies the content to be inserted.
  • Other standard CSS properties: You can apply any valid CSS property to the generated content, such as color, font-size, background, border, and more.

Additional Notes

  • The ::before pseudo-element is inline by default.
  • You can use the display property to change its display type if needed.
  • For content generation based on element content, consider using the attr() function with the content property.

Example with attr()

<p data-icon="star">This is a paragraph.</p>
p::before {
  content: attr(data-icon) " ";
  /* Other styles */
}

This will insert the value of the data-icon attribute before the paragraph content.

By understanding and effectively using the ::before pseudo-element, you can enhance the visual appeal and structure of your web pages without altering the underlying HTML.

Additional Tips

  • Use ::after for content after the element.
  • Combine ::before and ::after for creating elements like quotes, arrows, or other decorative elements.
  • Be mindful of accessibility when using generated content. Ensure it’s meaningful and doesn’t hinder user experience.

More Examples of ::before

Creating Custom List Markers

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
ul li::before {
  content: "• ";
  margin-right: 5px;
}

Adding Icons

<p>This is a paragraph with an icon.</p>
p::before {
  content: url('icon.svg'); /* Replace with your icon path */
  margin-right: 5px;
}

Creating a Tooltip-like Effect

<span class="tooltip">Hover over me</span>
.tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -20px;
  left: 0;
  padding: 5px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 3px;
  display: none;
}

.tooltip:hover::before {
  display: block;
}

Note: You’ll need to add a data-tooltip attribute to the span element with the desired tooltip text.

Generating Content Based on Element Content

<p class="price">$19.99</p>
.price::before {
  content: "Price: ";
}

Creating a Simple Loading Indicator

<div class="loading"></div>
.loading::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #f00;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg);   
 }
}