Pseudo-elements

Pseudo-elements are special keywords in CSS that let you style specific parts of an element’s content—without modifying the HTML structure. They’re ideal for adding decorative elements, styling individual characters or lines, or inserting generated content.

Common Pseudo-elements

• ::before – Inserts content before the element’s actual content

• ::after – Inserts content after the element’s actual content

• ::first-letter – Styles only the first letter of a text block

• ::first-line – Styles the first line of a paragraph or block

• ::selection – Styles text when it is selected by the user

Example:

/* Add an icon before a heading */
h3::before {
  content: "➤ ";
  color: #666;
}
/* Create a visual underline using after */
a::after {
  content: "";
  display: block;
  height: 2px;
  background: #000;
}
/* Style the first letter for typographic effect */
p::first-letter {
  font-size: 1.5rem;
  font-weight: bold;
}

Why Use Pseudo-elements?

They’re a clean, efficient way to add visual enhancements and structure-related styling without adding extra HTML tags. This makes your code more maintainable and your styles easier to manage—especially for scalable component design.

What is Superflex.ai?

We’ve all seen great designs lose their edge during development. Superflex solves that by generating real, usable React components directly from your Figma files. It respects your design system, keeps your UI logic clean, and helps developers stay true to the original vision—without extra interpretation or cleanup.