สอน-CSS-Pseudo-Element-2

ทำเว็บไซต์ สอน CSS การใช้งาน before, after และ content

ทำเว็บไซต์ สอน CSS การใช้งาน before, after และ content



ทำเว็บไซต์ สอน CSS
คงจะเคยผ่านตามากันบ้างแล้วสำหรับนักพัฒนาเว็บไซต์สำหรับ before, after และ content เพราะเป็นหนึ่งในความสามารถของการเขียน CSS เราเรียก syntax เหล่านี้ว่า Pseudo Element หรือองค์ประกอบแฝงที่จะถูกเพิ่มเข้าไปใน html นั่นเองครับ Pseudo Element ไม่ได้มีเพียงแค่ before และ after แต่ยังมีอีกหลาย ๆ คำสั่งตัวอย่างเช่น

active, visited เป็นต้น สามารถดูคำสั่งของ Pseudo Element เพิ่มเติมได้ที่เว็บไซต์ http://www.w3schools.com/css/css_pseudo_elements.asp

อธิบาย before

before จะเป็นคำสั่งไว้สำหรับกำหนดข้อมูลที่อยู่ด้านหน้า เมื่อมีการเรียกใช้งาน element ผ่าน id หรือ class นั้น ๆ ข้อมูลใน content จะถูกนำไปแสดงในตำแหน่งหน้าสุด ตัวอย่างเช่น เมื่อเราเรียกใช้งาน p element และกำหนด content ให้เท่ากับ “Good”


อธิบาย after

after จะเป็นคำสั่งไว้สำหรับกำหนดข้อมูลที่อยู่ต่อจาก before เมื่อมีการเรียกใช้งาน element ผ่าน id หรือ class นั้น ๆ ข้อมูลใน content จะถูกนำไปแสดงต่อจาก content ของ before ตัวอย่างเช่น



สำหรับ content จะเป็นตัวเก็บข้อมูลที่จะนำไปแสดงในหน้า html ของทั้ง before และ after จากตัวอย่างการใช้งานด้านบน ถ้ารองรวมโค๊ดเป็น html และ css จะได้ผลลัพธ์ดังนี้ครับ

html


CSS



ผลลัพธ์ในหน้า Output

สำหรับการใช้งาน CSS Pseudo Element อย่าง before, after และ content เรามักจะเห็นว่าถูกนำไปใช้กับการจัดการกับ SVG icon อย่างที่เราเห็นใน Bootstrap Framework เป็นต้น

กระทู้ใกล้เคียง

วิธีทำ Banner ให้เว็บไซต์ แบบเปิดปิดอัตโนมัติ... วิธีทำ Banner ให้เว็บไซต์ แบบเปิดปิดอัตโนมัติ วิธีทำ Banner ดูตัวอย่าง Banner หลาย ๆ เว็บไซต์จำเป็นต้องมีการแสดง Banner เพราะบางทีแบนเนอร...
HTML5 Video ทำวีดีโอให้เป็นพื้นหลัง... HTML5 Video ทำวีดีโอให้เป็นพื้นหลัง อีกหนึ่งเทคนิคการทำเว็บไซต์สมัยใหม่ที่นิยมทำกันมากมายในปัจจุบัน เป็นลูกเล่นการทำเว็บไซต์ที่ดึงดูดผู้เข้าชมเว็บไ...
วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไ... วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไซต์ วิธีทำเว็บ ให้โหลดเร็ว เคยไหมครับที่คลิกลิงค์ข่าวจาก facebook เพราะอ่านคำโปรยแล้ว อยากจะเข้...
ทำเว็บไซต์ ด้วย CSS3 Media Query คืออะไร และการใช... ทำเว็บไซต์ CSS3 Media Query คืออะไร เขียนคำสั่ง CSS ให้ทำงานในขนาดหน้าจอที่แตกต่างกัน ทำเว็บไซต์ ด้วย CSS3 Media Query คือคุณสมบัติที่มีอยู่ในภาษา...