Coding

Let’s understand pseudo-element

မဂၤလာပါရွင့္။
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
    • element

 

    • element

 

    • element

 

    • element

 

    • element

 

    • element

 

// 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 symbols 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 ကို တျဖည္းျဖည္းႏွင့္ အသုံးျပဳလာလိမ့္မည္ဟု ေမွ်ာ္လင့္ပါတယ္။
အဆုံးအထိ ဖတ္ရႈေပးတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *