Pseudo-elements

::before နှင့် ::after

Element တစ်ခုရဲ့ အရှေ့ဘက် (::before) နဲ့ အနောက်ဘက် (::after) နေရာတွေမှာ မိမိလိုချင်တဲ့ Content တစ်ခုခုကို ထည့်သွင်းပေးတာပါ။ ဒီနေရာမှာ အရေးကြီးတာက content: "" ဆိုတဲ့ Property က မပါမဖြစ် ပါကိုပါရပါမယ်။ မပါရင် အလုပ်မလုပ်ပါဘူး။

/* ခေါင်းစဉ်ရှေ့မှာ မီးတောက်လေး ထည့်မယ် */
h1::before {
  content: "🔥";
  margin-right: 10px;
}

/* စာကြောင်းဆုံးရင် "Read More" လို့ ထည့်မယ် */
.excerpt::after {
  content: " Read More...";
  color: blue;
  font-size: 0.8em;
}

အလှဆင်ရာတွင် အသုံးပြုခြင်း

content: "" ကို ဘာစာမှမရေးဘဲ အလွတ်ထားခဲ့ပြီး၊ သူ့ကို Width တွေ Height တွေ သတ်မှတ်ပေးကာ မိမိစိတ်ကြိုက် လှပတဲ့ ဒီဇိုင်းလေးတွေ ဖန်တီးလို့လည်း ရပါသေးတယ်။

/* Button ပေါ်မှာ Mouse တင်ရင် အောက်က မျဉ်းကြောင်းလေး ပြေးလာတာမျိုး */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: red;
  transition: width 0.3s;
}

.nav-link:hover::after {
  width: 100%; /* Hover လုပ်ရင် မျဉ်းကြောင်းက အပြည့် ဖြစ်သွားမယ် */
}

အခြား Pseudo-elements

::first-letter - စာပိုဒ်တစ်ခုရဲ့ ပထမဆုံး စာလုံးလေး တစ်လုံးတည်းကိုပဲ ရွေးချယ်တာပါ။ (သတင်းစာတွေမှာလို Drop Cap ဒီဇိုင်းမျိုး လုပ်ချင်ရင် သုံးပါတယ်)
::first-line - စာပိုဒ်ရဲ့ ပထမဆုံး စာကြောင်း တစ်ကြောင်းလုံးကို ရွေးချယ်တာပါ။
::selection - User က စာသားတွေကို Mouse နဲ့ ဖိဆွဲပြီး Select မှတ်လိုက်တဲ့ အချိန်မှာ ပေါ်လာမယ့် Highlight အရောင်ကို ပြောင်းချင်တဲ့အခါ သုံးပါတယ် ခင်ဗျာ။

p::selection {
  background-color: yellow;
  color: black;
}