Pseudo-elements เช่น ::before และ ::after คืออะไร

Question

Accepted Answer

A **pseudo-element** (double colon `::`) สไตล์ส่วน*เฉพาะ*ของ element หรือ**สร้างคอนเทนต์**ที่ไม่อยู่ใน HTML — โดยไม่เพิ่มมาร์กอัปพิเศษ ## ::before และ ::after — คอนเทนต์ที่สร้างขึ้น ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` คุณสมบัติ `content` เป็นข้อบังคับ — หากไม่มี pseudo-element จะไม่แสดงผล คอนเทนต์ที่สร้างขึ้นคือลูกที่ตำแหน่งเริ่มต้นพอดี (`::before`) หรือตำแหน่งสิ้นสุด (`::after`) ของ element ## รูปทรงตกแต่งโดยไม่ต้องใช้ div เพิ่มเติม ```css .tooltip::after { content: ""; /* empty but present → creates a box */ position: absolute; border: 8px solid transparent; border-top-color: black; /* a CSS triangle (tooltip arrow) */ } ``` นี่คือการใช้งานแบบคลาสสิก: การวาดลูกศร ป้ายกำกับ overlays เส้นตกแต่ง — ทำให้ HTML สะอาดจากเอลิเมนต์ที่ใช้แสดงผลเท่านั้น ## Pseudo-elements อื่นๆ (สไตล์ส่วนของ element) ```css p::first-line { font-weight: bold; } /* the first rendered line */ p::first-letter { font-size: 3em; } /* drop cap */ ::selection { background: yellow; } /* highlighted/selected text */ input::placeholder { color: gray; } /* placeholder text */ ``` ## Colon หนึ่งตัวกับ Colon สองตัว ```css .x:hover { } /* pseudo-CLASS (state) — one colon */ .x::before { } /* pseudo-ELEMENT (a part) — two colons */ ``` CSS3 นำ `::` มาใช้เพื่อแยกแยะ pseudo-elements จาก pseudo-classes (เบราว์เซอร์ยังคงยอมรับ single colon บนตัวเก่าเพื่อความเข้ากันได้ แต่ใช้ `::`) ## หมายเหตุด้านความสามารถในการเข้าถึง คอนเทนต์ที่สร้าง `content` ถูกอ่านโดยโปรแกรมอ่านหน้าจออื่นบาง — อย่าใส่ข้อมูลสำคัญลงใน `::before`/`::after` เท่านั้น (ใช้สำหรับการตกแต่ง) และไอคอนตกแต่งควรปล่อยให้อยู่นอกแผนผังความสามารถในการเข้าถึง ## เหตุใดจึงสำคัญ Pseudo-elements ให้คุณเพิ่มไอคอน รูปทรงตกแต่ง (ลูกศร ตัวแบ่ง) drop caps และตัวนับในแค่ CSS — ไม่มี `

` หรือ `` เพิ่มเติม พวกเขารักษามาร์กอัปแบบ semantic ไว้พร้อมกับการเปิดใช้งานรายละเอียดภาพที่สมบูรณ์ และเป็นพื้นฐานของการสไตล์ที่깨끗และสามารถบำรุงรักษาได้