Challenge - Pseudo-element card

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

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.

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;
}

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

Next lesson: Challenge - Advanced selectors

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies