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

<h3>ทำเว็บไซต์ สอน CSS การใช้งาน before&comma; after และ content<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>ทำเว็บไซต์ สอน CSS<&sol;strong><br &sol;>&NewLine;คงจะเคยผ่านตามากันบ้างแล้วสำหรับนักพัฒนาเว็บไซต์สำหรับ before&comma; after และ content เพราะเป็นหนึ่งในความสามารถของการเขียน CSS เราเรียก syntax เหล่านี้ว่า Pseudo Element หรือองค์ประกอบแฝงที่จะถูกเพิ่มเข้าไปใน html นั่นเองครับ Pseudo Element ไม่ได้มีเพียงแค่ before และ after แต่ยังมีอีกหลาย ๆ คำสั่งตัวอย่างเช่น <&excl;--more--><&sol;p>&NewLine;<p>active&comma; visited เป็นต้น สามารถดูคำสั่งของ Pseudo Element เพิ่มเติมได้ที่เว็บไซต์ <a href&equals;"http&colon;&sol;&sol;www&period;w3schools&period;com&sol;css&sol;css&lowbar;pseudo&lowbar;elements&period;asp" target&equals;"&lowbar;blank">http&colon;&sol;&sol;www&period;w3schools&period;com&sol;css&sol;css&lowbar;pseudo&lowbar;elements&period;asp<&sol;a><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>อธิบาย before<&sol;h4>&NewLine;<p>before จะเป็นคำสั่งไว้สำหรับกำหนดข้อมูลที่อยู่ด้านหน้า เมื่อมีการเรียกใช้งาน element ผ่าน id หรือ class นั้น ๆ ข้อมูลใน content จะถูกนำไปแสดงในตำแหน่งหน้าสุด ตัวอย่างเช่น เมื่อเราเรียกใช้งาน p element และกำหนด content ให้เท่ากับ &&num;8220&semi;Good&&num;8221&semi;<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;p&colon;before&lbrace; &NewLine; content&colon;"Good"&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>อธิบาย after<&sol;h4>&NewLine;<p>after จะเป็นคำสั่งไว้สำหรับกำหนดข้อมูลที่อยู่ต่อจาก before เมื่อมีการเรียกใช้งาน element ผ่าน id หรือ class นั้น ๆ ข้อมูลใน content จะถูกนำไปแสดงต่อจาก content ของ before ตัวอย่างเช่น<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;p&colon;after&lbrace; &NewLine; content&colon;"Morning"&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;สำหรับ content จะเป็นตัวเก็บข้อมูลที่จะนำไปแสดงในหน้า html ของทั้ง before และ after จากตัวอย่างการใช้งานด้านบน ถ้ารองรวมโค๊ดเป็น html และ css จะได้ผลลัพธ์ดังนี้ครับ<&sol;p>&NewLine;<p><strong>html<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;html&gt&semi; &NewLine;&lt&semi;body&gt&semi; &NewLine; &lt&semi;p&gt&semi;&lt&semi;&sol;p&gt&semi; &NewLine;&lt&semi;&sol;body&gt&semi; &NewLine;&lt&semi;html&gt&semi;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<p><strong>CSS<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >p&colon;before &lbrace; &NewLine;&Tab;content&colon; "Good"&semi; &NewLine;&rcub; &NewLine;p&colon;after &lbrace; &NewLine; content&colon; " Morning"&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>ผลลัพธ์ในหน้า Output<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >Good Morning<&sol;pre>&NewLine;<p>สำหรับการใช้งาน CSS Pseudo Element อย่าง before&comma; after และ content เรามักจะเห็นว่าถูกนำไปใช้กับการจัดการกับ SVG icon อย่างที่เราเห็นใน Bootstrap Framework เป็นต้น<&sol;p>&NewLine;