A pseudo-element (double colon ::) สไตล์ส่วนเฉพาะของ element หรือสร้างคอนเทนต์ที่ไม่อยู่ใน HTML — โดยไม่เพิ่มมาร์กอัปพิเศษ
::before และ ::after — คอนเทนต์ที่สร้างขึ้น
{
: ;
}
{
: ;
}
A pseudo-element (double colon ::) สไตล์ส่วนเฉพาะของ element หรือสร้างคอนเทนต์ที่ไม่อยู่ใน HTML — โดยไม่เพิ่มมาร์กอัปพิเศษ
{
: ;
}
{
: ;
}
คุณสมบัติ content เป็นข้อบังคับ — หากไม่มี pseudo-element จะไม่แสดงผล คอนเทนต์ที่สร้างขึ้นคือลูกที่ตำแหน่งเริ่มต้นพอดี (::before) หรือตำแหน่งสิ้นสุด (::after) ของ element
.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 สะอาดจากเอลิเมนต์ที่ใช้แสดงผลเท่านั้น
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 */
.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 — ไม่มี <div> หรือ <span> เพิ่มเติม
พวกเขารักษามาร์กอัปแบบ semantic ไว้พร้อมกับการเปิดใช้งานรายละเอียดภาพที่สมบูรณ์ และเป็นพื้นฐานของการสไตล์ที่깨끗และสามารถบำรุงรักษาได้