ประโยชน์ของการใช้ CSS before - after วิธีการใช้และตัวอย่าง

  • 25 ม.ค. 641,702
ประโยชน์ของการใช้ CSS before - after วิธีการใช้และตัวอย่าง

การใช้งาน css ::before และ ::after

css pseudo-elements before และ after อยู่ใน css version 3 ซึ่งมีประโยชน์ คือ ใช้ใส่ข้อความ สัญลักษณ์ หรือรูปไอคอนต่างๆ ไว้ก่อน-หลังแท็ก HTML ที่เราเลือกไว้ ซึ่งสามารถใส่ได้ทุกแท็ก เมื่อใส่แล้วจะทำให้มีข้อความ สัญลักษณ์ หรือไอคอน ปรากฎอยู่ก่อน-หลังแท็ก

 

สิ่งที่เราจะใส่ต้องอยู่ใน attribute content:' ' ซึ่งในนั้น ค่า Default ของ element นั้น จะเป็น inline element แต่เราสามารถใช้ css บังคับ style การแสดงผลให้แสดงในแบบต่างๆ ได้

 

จุดเด่นของการใช้ css before และ after

การใช้งาน css pseudo-elements นี้ เพื่อใส่มูลต่างๆ (ข้อความ สัญลักษณ์ หรือไอคอนรูปภาพ) ต่างๆ เข้าไปอยู่ใน content:' ' และสามารถจัดการแสดงผลได้อีกด้วย และมีข้อดีที่สำคัญ คือ
  • ข้อมูลใน content:' ' จะไม่ถูก search engine index ออกไปในผลการค้นหา
  • ข้อมูลใน content:' ' ไม่สามารถลากเม้าส์ เพื่อก๊อบปี้ข้อมูลใน content:' ' ได้
  • สามารถลดแท็ก HTML ที่ตั้งขึ้นมา เพื่อบังคับการแสดงผลได้

 

ตัวอย่างการใช้งาน css ::before และ ::after

 

การใส่ข้อความ css ::before ::after

ตัวอย่างการใส่ข้อความ css ::before ::after

 

วิธีการใส่เครื่องหมายและสัญลักษณ์ต่างๆ ใน content:' ' จะต้องใส่เป็นรหัสตาม CSS Entities Code ที่ขึ้นต้นด้วย \ (back slash) ตัวอย่างเช่น content:'\00AE'; ซึ่ง code 00AE นี้ คือเครื่องหมาย ® (เครื่องหมาย REGISTERED) และยังมี CSS Entities Code อื่นๆ อีกมากมาย ยกตัวอย่างเช่นตารางนี้

 

ตัวอย่าง CSS Entities Code

CharCSS EntitiesName
~007ETILDE
 00A0NO-BREAK SPACE
¡00A1INVERTED EXCLAMATION MARK
¢00A2CENT SIGN
£00A3POUND SIGN
¤00A4CURRENCY SIGN
¥00A5YEN SIGN
¦00A6BROKEN BAR
§00A7SECTION SIGN
¨00A8DIAERESIS
©00A9COPYRIGHT SIGN
ª00AAFEMININE ORDINAL INDICATOR
«00ABLEFT-POINTING DOUBLE ANGLE QUOTATION MARK
¬00ACNOT SIGN
­00ADSOFT HYPHEN
®00AEREGISTERED SIGN
¯00AFMACRON
°00B0DEGREE SIGN
±00B1PLUS-MINUS SIGN
²00B2SUPERSCRIPT TWO
³00B3SUPERSCRIPT THREE
´00B4ACUTE ACCENT
µ00B5MICRO SIGN
00B6PILCROW SIGN
·00B7MIDDLE DOT
¸00B8CEDILLA
¹00B9SUPERSCRIPT ONE
º00BAMASCULINE ORDINAL INDICATOR
»00BBRIGHT-POINTING DOUBLE ANGLE QUOTATION MARK
¼00BCVULGAR FRACTION ONE QUARTER
½00BDVULGAR FRACTION ONE HALF
¾00BEVULGAR FRACTION THREE QUARTERS

สามารถดู css entities code เพิ่มเติมได้ที่ https://www.w3schools.com/cssref/css_entities.asp

 

การใส่ css entities code ::before ::after

ตัวอย่างการใส่ css entities code ::before ::after

 

การใส่รูปภาพหรือไอคอนด้วย ::before ::after

ตัวอย่างการใส่รูปภาพหรือไอคอนด้วย ::before ::after

 

จากตัวอย่างการใช้ css ::before ::after ข้างต้น แสดงให้เห็นวิธีการใช้งาน css เพื่อใส่ข้อความ, css entities code และรูปภาพหรือไอคอน ซึ่งใน pseudo-elements นี้ เรายังสามารถจัดรูปแบบต่างๆ ได้ เสมือนเป็น HTML แท็ก ถ้าบริษัทรับทำเว็บไซต์นำไปประยุกต์ใช้ดู ก็จะสามารถลด HTML แท็กที่ตั้งขึ้นมาเพื่อการแสดงผลใน Source Code ของเราได้อีกด้วย

บทความล่าสุด