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