CodeBlanks Logo Icon CodeBlanks
Login Register

Challenge - Pseudo-element card

CSS course · Advanced · Lesson 49/52

Build a decorative card with pseudo-elements.

Decorative card with ::before and ::after

The ::before and ::after pseudo-elements add decorative content to an element. Add ::before to .badge with content: "New" and a small badge appears before the label.

These elements are positioned with position: absolute; the host element needs position: relative. A linear-gradient can paint the background; border-radius rounds the corners. Three declarations build a visual accent card.

Exercise Complete the decorative card

Complete the CSS below. Give .badge a position: relative. In .badge::before add content: "New", position: absolute, top: -8px and background: linear-gradient(90deg, #f97316, #ef4444).

Show example solution 
/* badge container */
.badge {
  position: relative;
}

/* badge front face */
.badge::before {
  content: "New";
  position: absolute;
  top: -8px;
  background: linear-gradient(90deg, #f97316, #ef4444);
}

Test yourself

  1. Which property is required to give content to ::before?

    .badge::before {
  /* ??? */
  position: absolute;
}
    • color
    • content
    • display
    • visibility
    Show answer

    content — Correct. ::before and ::after show nothing without the content property.

  2. Complete the content value

    .badge::before {
  content: ____;
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(90deg, #f97316, #ef4444);
  color: white;
  padding: 2px 8px;
  border-radius: 999px;
}
    Show answer 
    .badge::before {
  content: "New";
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(90deg, #f97316, #ef4444);
  color: white;
  padding: 2px 8px;
  border-radius: 999px;
}

  3. Match each pseudo-element piece

    ::before
    Adds content before the element
    ::after
    Adds content after the element
    content
    Pseudo-element text
    position: relative
    Anchors the host element

All lessons in Advanced

1 Animations

  1. What are keyframes?
  2. Animation-name and duration
  3. Animation timing function
  4. Animation iteration
  5. Animation direction and fill-mode
  6. Summary - Loader animation

2 Gradients

  1. Linear gradient
  2. Radial gradient
  3. Conic gradient
  4. Color stops
  5. Layered gradients
  6. Summary - Button variations

3 Filters and blend

  1. Filter property
  2. Grayscale and sepia
  3. Hue-rotate and saturate
  4. Drop-shadow
  5. Mix-blend-mode
  6. Summary - Image effects

4 Modern layout

  1. Subgrid
  2. Container queries
  3. Aspect-ratio
  4. Object-fit
  5. Gap multi-column
  6. Summary - Modern card grid

5 Writing modes and logical properties

  1. Writing-mode
  2. Logical properties
  3. Inset property
  4. Block and inline
  5. Direction and unicode-bidi
  6. Summary - Multi-direction card

6 Accessible CSS

  1. Sr-only technique
  2. Focus-visible
  3. Prefers color scheme
  4. Prefers reduced motion
  5. Prefers contrast
  6. Summary - Accessible theme

7 Print and paged media

  1. @page rule
  2. Page break
  3. Print media
  4. Print color adjust
  5. Page number
  6. Summary - Printable report

8 Project: Dashboard UI

  1. Project: Dashboard UI
  2. Sidebar and header
  3. KPI cards
  4. Data table
  5. Project final - Dashboard

9 Advanced final

  1. Challenge - Animated hero
  2. Challenge - Pseudo-element card
  3. Challenge - Advanced selectors
  4. Challenge - Modern layout
  5. Challenge - Advanced capstone