การใช้งาน before และ after ใน CSS Pseudo-elements

pseudo

หลายๆคนที่เขียน css บ่อยๆอาจจะเคยเห็นผ่านตากันบ้างแล้วกับคำสั่ง :before และ :after ซึ่งไม่รู้เรียกมันว่าอะไรจริงๆแล้วมันคือ CSS Pseudo-elements

จริงๆแล้วหลักการ ของ Before และ After นี้ไม่ได้มีอะไรมากเลยครับ มันแค่จะไปเติม ที่ด้านหน้าและด้านหลัง ของ Class ที่เรา Select ใน css เท่านั้นครับ ดังภาพด้านล่าง


จากตัวอย่างข้างบน เราจะเห็น Tag a ของเราข้อความภายในจะถูกเติมด้วยตัวหนังสือที่เขียนใน Css หวังว่าเทคนิคนี้ คงถูกนำไปปรับประยุกต์ใช้งานแล้วแต่สไตล์คนเขียนแต่ละคนกันนะครับ

*สำหรับ CSS Pseudo-elements เป็นคำสั่งใน Css3 ซึ่งจะสามารถใช้งานได้กับ IE7+ ขึ้นไปนะครับ

Moshikub

สวัสดีครับ ผมชื่อโมชิ เป็น Web Developer มาแล้ว 4 ปีตอนนี้เป็น Programmer ที่ Dek-d.com รับงาน Freelance มีไรคุยกันได้ที่ Facebook ครับ