Pseudo-elements

Pseudo-elements คืออะไร?

Pseudo-elements ช่วยให้เราสามารถเข้าถึง Sub-element หรือ Element ย่อย ที่ไม่ได้ประกาศอย่างชัดเจนใน HTML และไม่ได้ขึ้นอยู่กับสถานะเหมือนกับ Pseudo-classes

ไวยากรณ์การเขียน Pseudo-elements (Syntax)

Loading...

Pseudo-element ::before และ ::after

::before และ ::after เป็น Pseudo-element ที่นิยมใช้มากที่สุด เหมาะสำหรับสร้าง Element ที่มีเนื้อหาไม่สำคัญหรือใช้ในการตกแต่งไอคอน

ตัวอย่างการใช้ Pseudo-elements ::before และ ::after

<style>
  p::before {  
   content: "🎉";
  }
  p::after {
   content: "🎊";
  }
</style>

<p>Paragraph นี้มี Emoji 2 อัน</p>