CSS Pseudo-elements Tutorial | ::before & ::after Examples

1. Basic ::before & ::after

Pseudo-elements create virtual elements before or after an element's content. The content property is required, even if empty.

Decorative Quotes

Design is intelligence made visible

::before and ::after add quotation marks.

Icon Prefix

Launch App

::before adds an emoji icon.

Animated Arrow

Learn More

Hover to animate the ::after arrow.

/* Add quotes around text */
.quote::before { content: '"'; }
.quote::after  { content: '"'; }

/* Add icon before text */
.icon::before {
  content: '→';
  margin-right: 0.5rem;
}

/* Animated arrow after link */
.link::after {
  content: ' →';
  display: inline-block;
  transition: transform 0.2s;
}

.link:hover::after {
  transform: translateX(4px);
}

2. Decorative Underlines

Create custom underlines with gradients and animations using ::after.

Gradient Underline

New Arrivals

Gradient underline with ::after.

Grow on Hover

View Collection

Underline grows from left on hover.

Center Expand

About Us

Underline expands from center.

/* Gradient Underline */
.underline {
  position: relative;
}

.underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #ec4899);
}

/* Grow from Left */
.underline-grow::after {
  width: 0;
  transition: width 0.3s ease;
}

.underline-grow:hover::after {
  width: 100%;
}

3. Badges & Labels

Add badges, notification counts, and labels without extra HTML elements.

NEW Badge

Feature

::after creates a corner badge.

PRO Badge

Upgrade

Gradient gold PRO badge.

Count Badge (data-attr)

Notifications

Uses attr() to read data attribute.

/* Static Badge */
.badge::after {
  content: 'NEW';
  position: absolute;
  top: -8px;
  right: -12px;
  background: #ef4444;
  color: white;
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
}

/* Dynamic Count from data-attribute */
.count::after {
  content: attr(data-count);
  /* ...positioning styles... */
}

/* HTML: <span class="count" data-count="5">...</span> */

4. Pure CSS Tooltips

Create tooltips using ::before for the text and ::after for the arrow.

Hover Tooltip

Tooltip appears on hover.

/* Tooltip Text */
.tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 0.75rem;
  background: #0f172a;
  color: white;
  font-size: 0.75rem;
  border-radius: 0.375rem;
  opacity: 0;
  transition: all 0.2s;
}

/* Tooltip Arrow */
.tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #0f172a;
  opacity: 0;
}

.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
}

/* HTML: <span data-tooltip="Tip text">...</span> */

5. Decorative Shapes

Create ribbons, corner decorations, and other visual flourishes.

Corner Ribbon

Summer Collection

Rotated ::before creates a ribbon.

Corner Check

Premium Plan

Corner triangle with checkmark.

Dot Pattern

Decorative Dots

Pattern using radial-gradient.

Quote Mark

Blockquote style

Large decorative quote mark.

Gradient Border

Gradient Edge

Border with gradient colors.

/* Corner Ribbon */
.ribbon::before {
  content: 'SALE';
  position: absolute;
  top: 12px;
  right: -28px;
  transform: rotate(45deg);
  background: #ef4444;
  color: white;
  padding: 0.25rem 2rem;
}

/* Corner Triangle */
.corner::before {
  border-style: solid;
  border-width: 2.5rem 2.5rem 0 0;
  border-color: #6366f1 transparent transparent;
}

/* Dot Pattern */
.dots::before {
  background: radial-gradient(circle, #6366f1 2px, transparent 2px);
  background-size: 8px 8px;
}

/* Gradient Border */
.gradient-border {
  background: linear-gradient(white, white) padding-box,
              linear-gradient(135deg, #6366f1, #ec4899) border-box;
  border: 3px solid transparent;
}

6. Text Dividers

Create "or" dividers and other text separators with lines on both sides.

Simple Divider

or continue with

Lines expand with flexbox.

Gradient Divider

SECTION

Gradient fades to edges.

/* Text Divider with Lines */
.divider {
  display: flex;
  align-items: center;
  color: #64748b;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, #e2e8f0, #6366f1);
}

.divider::after {
  background: linear-gradient(90deg, #6366f1, #e2e8f0);
}

.divider::before { margin-right: 1rem; }
.divider::after  { margin-left: 1rem; }

7. Custom List Markers

Replace default bullets with custom icons, checkmarks, or numbered circles.

Check Marks

Unlimited projects
Priority support
Custom domains

Green checkmarks via ::before.

Numbered Circles

Sign up for free
Choose a plan
Start building

CSS counters create numbers.

/* Check Mark List */
.list li { position: relative; padding-left: 1.75rem; }

.list--check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #10b981;
}

/* Numbered Circle List (CSS Counters) */
.list--number { counter-reset: list-counter; }

.list--number li {
  counter-increment: list-counter;
}

.list--number li::before {
  content: counter(list-counter);
  position: absolute;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: #6366f1;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

8. Hover Effects

Create overlay effects and shine animations on hover.

Overlay on Hover

Image Card

Hover to reveal overlay text.

Shine Effect

Premium Button

Hover for a shine sweep.

/* Overlay Effect */
.overlay { position: relative; overflow: hidden; }

.overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(99, 102, 241, 0.9);
  opacity: 0;
  transition: opacity 0.3s;
}

.overlay::after {
  content: 'View Details';
  /* centered text styling */
  opacity: 0;
}

.overlay:hover::before,
.overlay:hover::after {
  opacity: 1;
}

/* Shine Sweep */
.shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-25deg);
}

.shine:hover::before {
  left: 150%;
  transition: left 0.5s;
}