เจาะลึกการใช้งาน CSS ::before และ ::after
ยกระดับการตกแต่งเว็บไซต์ด้วย Pseudo-elements เพื่อลดการใช้ HTML Tag โดยไม่จำเป็น
CSS Pseudo-elements ::before และ ::after เริ่มมีให้ใช้งานตั้งแต่ CSS Version 3 มีประโยชน์อย่างมากในการใส่ข้อความ สัญลักษณ์ หรือไอคอนต่างๆ ไว้ด้านหน้าหรือด้านหลังแท็ก HTML ที่เลือกไว้ โดยไม่ต้องเพิ่มโค้ดในหน้า HTML จริง ช่วยให้ Source Code ดูสะอาดและจัดการสไตล์ได้ง่ายขึ้น
หลักการทำงานสำคัญ
หัวใจสำคัญของการใช้งานคือ Property ที่ชื่อว่า content: ' '; ซึ่งค่าเริ่มต้น (Default) จะมีลักษณะเป็น Inline Element แต่เราสามารถปรับเปลี่ยนสไตล์ (CSS) เพื่อบังคับให้แสดงผลเป็นแบบอื่นๆ เช่น Block หรือ Inline-block ได้ตามต้องการ
จุดเด่นของการใช้ CSS ::before และ ::after
-
SEO Friendly: ข้อมูลที่อยู่ใน attribute content จะไม่ถูก Search Engine นำไป Index ทำให้เราใส่สัญลักษณ์ตกแต่งได้โดยไม่กระทบต่อผลการค้นหา
-
Security & Layout: ข้อมูลเหล่านี้ไม่สามารถลากเมาส์เพื่อคลุมดำหรือก๊อบปี้ได้ ช่วยรักษาความเป็นระเบียบของเนื้อหาหลัก
-
Clean Code: ลดการสร้าง HTML Tag ฟุ่มเฟือยที่ตั้งขึ้นมาเพียงเพื่อการแสดงผลหรือตกแต่งหน้าเว็บ
ตัวอย่างการใช้งานจริง
ภาพที่ 1: ตัวอย่างการใส่ข้อความด้วย CSS ::before และ ::after
สำหรับการใส่เครื่องหมายหรือสัญลักษณ์พิเศษใน content: ' '; เรามักจะใช้รหัส CSS Entities Code ซึ่งจะขึ้นต้นด้วยเครื่องหมาย \ (Backslash) เช่น รหัส \00AE จะแสดงผลเป็นเครื่องหมาย ®
| Character | CSS Entities Code | Name |
|---|---|---|
| ~ | \007E | TILDE |
| \00A0 | NO-BREAK SPACE | |
| ¡ | \00A1 | INVERTED EXCLAMATION MARK |
| ¢ | \00A2 | CENT SIGN |
| £ | \00A3 | POUND SIGN |
| © | \00A9 | COPYRIGHT SIGN |
| ® | \00AE | REGISTERED SIGN |
| ° | \00B0 | DEGREE SIGN |
ภาพที่ 2: ตัวอย่างการใช้ CSS Entities Code
ภาพที่ 3: ตัวอย่างการใส่รูปภาพหรือไอคอน
การใช้ CSS ::before และ ::after ไม่ได้มีไว้เพื่อความสวยงามเท่านั้น แต่ยังช่วยลดความซับซ้อนของ HTML โครงสร้างโปรแกรมจึงมีประสิทธิภาพมากขึ้น หากคุณเป็น บริษัทรับทำเว็บไซต์ ที่ต้องการงานระดับมืออาชีพ ลองนำเทคนิคนี้ไปปรับใช้จะช่วยให้เว็บไซต์โหลดเร็วและจัดการง่ายขึ้นอย่างแน่นอน