မဂၤလာပါရွင့္။
Spiceworks Myanmar မွာ Web Designer အျဖစ္ တာဝန္ယူလုပ္ကိုင္ေနတဲ႔ ဆုရည္ထြန္းပါ။
ဒီတစ္ေခါက္ေရြးခ်ယ္ထားတာကေတာ့ CSS မွာ အသုံးမ်ားတဲ့ “pseudo-element” အေၾကာင္း ေဆြးေႏြးသြားခ်င္ပါတယ္။
Pseudo-element လို႔ေျပာလိုက္ရင္ code ေရးသူေတြအတြက္ ပထမဆုံး သတိရမိတာက ::before or ::after ျဖစ္မယ္လို႔ထင္ပါတယ္။ တကယ္လည္း CSS code မွာ ::before or ::after ကအသုံးအမ်ားဆုံး pseudo-element ဆိုလည္း မမွားပါဘူး။
အခုကေတာ့ အသုံးဝင္မယ့္ တျခား pseudo-element ေတြအေၾကာင္းလည္း ထပ္ၿပီး ေလ့လာၾကည့္ၾကရေအာင္ေနာ္။

What is Pseudo-element?

Pseudo-element ဆိုတာ HTML မွာသတ္မွတ္ထားတဲ့ element ရဲ႕အစိတ္အပိုင္းတစ္ခုကို style ျပဳလုပ္ျခင္း ျဖစ္ပါတယ္။
Selected element ကို CSS ရဲ႕ pseudo ပုံစံျဖင့္ style ျပဳလုပ္တာျဖစ္လို႔ HTML ကို ျပင္ဆင္ျခင္းမျပဳလုပ္ဘဲ ကိုယ္လိုခ်င္တဲ့ပုံစံကို style ထည့္ႏိုင္မွာျဖစ္ပါတယ္။
pseudo-element ရွိသလို pseudo-class လည္းရွိပါတယ္။ ဒါေပမယ့္ ေရးပုံေရးနည္း ကြဲမွာျဖစ္ပါတယ္။

How to use pseudo-elements

အေျခခံအားျဖင့္ selector တစ္ခု (ID, tag name, class name, etc.) :: pseudo-element name ျဖင့္ ေရးသားပါတယ္။
syntax of pseudo-elements:

selector::pseudo-element {
  //  property: value;
}

SCSS မွာဆိုရင္ေတာ့ ေအာက္ပါအတိုင္း ေရးႏိုင္ပါတယ္။

selector{
　 &::after{
     // property: value;
   }
 }

(Notes) ::before or ::after သတ္မွတ္မယ္ဆိုရင္ content အၿမဲတမ္း သတ္မွတ္ေပးရပါမယ္။
စာသား သို႔မဟုတ္ symbols မ်ားကို pseudo-elements အျဖစ္ထည့္သြင္းလိုပါက ၎တို႔ကို content တြင္သတ္မွတ္ေပးရပါမယ္။
Elements or images မ်ားကို ထည့္သြင္းလိုပါက content ( content: “”; ) အလြတ္ထားလိုက္ပါ။
ထို႔ေနာက္ pseudo-element အတြက္ position: absolute; element အတြက္ position: relative; ထားပါ။

// HTML


// CSS 
.content-after { 
position: relative; 
} 
.content-after::after { 
position: absolute; content: ""; 
}

 

Types of pseudo-elements

Pseudo-elements မ်ားကိုေတြးေသာအခါ ::before ႏွင့္ ::after ကိုစဥ္းစားမိၾကပါတယ္။ သို႔ေသာ္ အမွန္တကယ္တြင္ pseudo-elements အမ်ိဳးအစား အမ်ိဳးမ်ိဳးရွိပါတယ္။

Reference:All CSS Pseudo Elements

Pseudo-element အမ်ိဳးအစား အမ်ားႀကီးရွိတဲ့ထဲက လက္ေတြ႕မွာအသုံးမ်ားတဲ့ type ေတြကို ေျပာျပေပးသြားပါမယ္။

::after（::before）

Select လုပ္လိုက္တဲ့ element ရဲ႕ last child element အတြက္ pseudo-element ဆိုရင္ ::after ကိုအသုံးျပဳၿပီး first child အတြက္ ::before ကို အသုံးျပဳေရးသားႏိုင္ပါတယ္။
ေအာက္ပါ code မွာနမူနာေလ့လာႏိုင္ပါတယ္။

// HTML


// CSS

.content-after {
  position: relative;
  width: 50px;
  height: 100px;
  background-color: #ff6767;
}
.content-after::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  background-color: #000;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  border-radius: 50%;
}

အထက္ပါ pseudo-element ေဖာ္ျပခ်က္ ေအာင္ျမင္ပါက validation tool သည္ ေအာက္ပါပုံအတိုင္း output ထုတ္ေပးမွာျဖစ္ပါတယ္။

::first-letter

သတ္မွတ္ထားေသာ element ၏ပထမအကၡရာ၏ စာသားစတိုင္ကို ေျပာင္းလဲႏိုင္ပါတယ္။
အသုံးျပဳရန္ အခြင့္အလမ္းမ်ားစြာရွိသည္ဟု မထင္ေသာ္လည္း သိထားသင့္သည့္ pseudo-element တစ္ခုျဖစ္ပါတယ္။
ေဖာင့္သတ္မွတ္ခ်က္အတြက္ CSS ကို တစ္ခုလုံးအေနနဲ႔ သုံးလို႔ရပါတယ္။

// HTML
Only the first text can be styled.
// CSS

.first-txt::first-letter {
  font-size: 24px;
  font-weight: bold;
  color: #4f87ff;
  font-style: italic;
}

Result: Only the first text can be styled.

::first-line

သတ္မွတ္ထားေသာ element ရဲ႕ပထမစာေၾကာင္းတြင္ စာသားပုံစံကို ေျပာင္းလဲႏိုင္ပါတယ္။
:: first-letterႏွင့္ ဆင္တူသည္။ သို႔ေသာ္ ::first-line သည္ပထမစာေၾကာင္းႏွင့္သာ သက္ဆိုင္ပါတယ္။

// HTML
Only the first line will be styled. The second and subsequent lines do not apply. The second and subsequent lines do not apply.
// CSS

.first-line::first-line {
  font-size: 24px;
  font-weight: bold;
  color: #ff4fb6;
}

Result:

Only the first line will be styled.
It does not apply to the second and subsequent lines.
It does not apply to the second and subsequent lines.

 

::placeholder

HTML input tag or multi-line text input control (text area)tag ၏ placeholder ကို style ေျပာင္းလဲႏိုင္ပါတယ္။

// HTML
＜input type="text" class="content-placeholder" placeholder="you can change style"＞

// CSS
.content-placeholder::placeholder {
  color: #48e4ff;
  font-weight: bold;
  font-size: 14px;
}

 

What you can do with pseudo elements?

1.Count the number of elements

CSS ရဲ႕ counter-increment လို႔ေခၚတဲ့ property ကိုအသုံးျပဳၿပီး ေရးမယ္ဆိုရင္ element ရဲ႕ count က auto တိုးသြားမွာျဖစ္ပါတယ္။ ေအာက္ပါ example code ကို copy ယူၿပီး ဘယ္လိုအေျဖရမလဲ စမ္းၾကည့္ေပးပါေနာ္။

// HTML

  
Count
  
Count
  
Count/li>
  
Count
  
Count
  
Count


// CSS

.element-count li {
  counter-increment: count;
  position: relative;
  padding-left: 3.3em;
}
.element-count li::before {
  position: absolute;
  content: counter(count) "item";
  left: 0;
  top: 0;
  color: #ff7b00;
}

 

2.Add characters before and after the element

// HTML
You can put  symbol before and after the text

// CSS

.txt-mark {
  display: inline-block;
}
.txt-mark::before {
  content: "☆";
  color: red;
}
.txt-mark::after {
  content: "★";
  color: blue;
}

Result:

3.Diagonal background

// HTML

  

    

      Title Title
 Title Title
    
  

 
// CSS

.inner-block {
  position: relative;
  width: 1040px;
  padding: 0 30px;
  margin: 0 auto;
  height: 100%;
}
.mv {
  height: 800px;
  background-color: #d4d4d4;
  position: relative;
  z-index: 1;
}
.mv .txt {
  font-size: 45px;
  font-weight: bold;
  height: 100%;
  display: flex;
  align-items: center;
}
.mv::before {
  position: absolute;
  content: "";
  width: calc(50% - 150px);
  height: 100%;
  left: 0;
  top: 0;
  background-color: #79ccdb;
  z-index: -1;
}
.mv::after {
  position: absolute;
  content: "";
  width: 300px;
  height: 100%;
  background-color: #79ccdb;
  left: calc(50% - 300px);
  top: 0;
  bottom: 0;
  margin: auto;
  transform: skewX(-20deg);
  z-index: -1;
}

Result:

Summary

ဒီတစ္ခါမွာေတာ့ Pseudo-element ကို မိတ္ဆက္ေပးလိုက္ပါတယ္။ အသုံးျပဳနည္း စည္းမ်ဥ္းမ်ား ရွိေနေသာေၾကာင့္ စိတ္ရႈပ္ေထြးေနႏိုင္ပါတယ္။
ဒါေပမယ့္ ::before နဲ႔ ::after ဟာ coding အတြက္ လုံးဝလိုအပ္တယ္လို႔ ထင္ပါတယ္။ Pseudo-element ကို တျဖည္းျဖည္းႏွင့္ အသုံးျပဳလာလိမ့္မည္ဟု ေမွ်ာ္လင့္ပါတယ္။
အဆုံးအထိ ဖတ္ရႈေပးတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္။