Meydan okuma - Sözde element kartı

Sözde elementlerle dekoratif kart kurarsın.

::before ve ::after ile dekoratif kart

Sözde elementler ::before ve ::after, bir etikete dekoratif içerik ekler. .badge etiketine ::before verip content: "Yeni" yazarsan, etiketin başına küçük bir rozet gelir.

Bu elementlerin konumu position: absolute ile ayarlanır; ana etiket position: relative olmalı. Arka plan için linear-gradient verilebilir; köşe yuvarlama border-radius ile. Üç bildirimle görsel bir vurgu kartı kurulur.

Uygulama Dekoratif kartı tamamla

Aşağıdaki CSS'i tamamla. .badge etiketine position: relative ver. .badge::before sözde elementinde content: "Yeni", position: absolute, top: -8px ve background: linear-gradient(90deg, #f97316, #ef4444) bildirimleri olsun.

Örnek çözümü göster

/* rozet kabı */
.badge {
  position: relative;
}

/* rozet ön yüzü */
.badge::before {
  content: "Yeni";
  position: absolute;
  top: -8px;
  background: linear-gradient(90deg, #f97316, #ef4444);
}

Kendini test et

::before sözde elementine içerik vermek için hangi özellik zorunludur?
```
.badge::before {
  /* ??? */
  position: absolute;
}
```
- color
- content
- display
- visibility
Cevabı göster

content — Doğru. ::before ve ::after içeriği content özelliği olmadan hiçbir şey göstermez.

content değerini tamamla

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

Cevabı göster

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

Sözde element parçalarını eşle

::before

Etiketin başına içerik koyar
::after

Etiketin sonuna içerik koyar
content

Sözde elementin metni
position: relative

Ana etiketi çapa yapar

Sıradaki ders: Meydan okuma - İleri seçiciler

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler