Pseudo-elements

Pseudo-element က element တစ်ခုရဲ့ အစိတ်အပိုင်းအတုလေးတွေကို style လုပ်တာပါ။ ::before နဲ့ ::after က content အရှေ့/အနောက်မှာ decoration ထည့်ဖို့အသုံးများပါတယ်။ Icon, badge, decorative line, quote mark စတာတွေကို HTML မထပ်ထည့်ဘဲ CSS နဲ့လုပ်နိုင်ပါတယ်။

.section-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 8px;
  background: linear-gradient(90deg, cyan, magenta);
}

.note::before {
  content: "💡 ";
}

Section title အောက်မှာ gradient line တစ်ကြောင်းပေါ်လာမယ်။ Note စာသားရှေ့မှာ light bulb emoji ပေါ်ပါမယ်။