ပလတ်စတစ် အဲလီမင့် after

ပလတ်စတစ် အဲလီမင့် after သည် အဲလီမင့်တစ်ခု၏ နောက်တွင် စာသားထည့်သွင်းပေးသည်။ ၎င်းကို content ဂုဏ်သတ္တိနှင့်သာ တွဲဖက်၍ အသုံးပြုပြီး၊ ထိုဂုဏ်သတ္တိသည် ထည့်သွင်းရမည့် စာသားကို သတ်မှတ်ပေးသည်။

ဝါကျဖွဲ့ပုံ

cssselector::after {
  content: 'text';
}

ဥပမာ

ယခု ကျွန်ုပ်တို့ li ပေါ်သို့ mouse ရွှေ့လိုက်သောအခါ ၎င်း၏အဆုံးတွင် အောက်ပါစာသားများ ထည့်သွင်းစေပါမည်။

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>
cssli:hover::after {
  content: '!!!';
}

Результат:

ဥပမာ

ထည့်သွင်းမည့် စာသားများကို စတိုင်အမျိုးမျိုး သတ်မှတ်ပေးနိုင်ပါသည်။ ဥပမာအားဖြင့်၊ ဤစာသားကို အောက်ပါအရောင်တစ်မျိုးမျိုး သတ်မှတ်ကြည့်ကြပါစို့။

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>
cssli:hover::after {
  color: red;
  content: '!!!';
}

Результат:

ဆက်လက်လေ့လာရန်

  • ပလတ်စတစ် အဲလီမင့် before,
    အဲလီမင့်၏စာသားရှေ့တွင် စာသားထည့်သွင်းပေးသည်။
  • attr လုပ်ဆောင်ချက်,
    အဲလီမင့်၏ attribute တန်ဖိုးကို ရယူပေးသည်။
  • counter-increment ဂုဏ်သတ္တိ,
    အလိုအလျောက် နံပါတ်တပ်ပေးခြင်းကို သတ်မှတ်ပေးသည်။