CSS ::before & ::after Selectors: คู่มือปฏิบัติที่เป็นประโยชน์

CSS ::before selector แทรกเนื้อหาก่อน element ที่เลือก CSS ::after แทรกเนื้อหาหลัง element ที่ระบุ Selectors เหล่านี้มักใช้เพื่อเพิ่มข้อความก่อนหรือหลัง paragraph หรือ link

เมื่อคุณออกแบบเว็บไซต์ คุณอาจต้องการเพิ่มเนื้อหาก่อนหรือหลังเนื้อหาของ element ปรากฏตัว เช่น คุณอาจต้องการเพิ่มรูปภาพก่อนแต่ละ bullet point ในรายการ

ที่นี่คือที่มาของ CSS ::before และ ::after pseudo-elements pseudo-elements เหล่านี้ช่วยให้คุณแทรกเนื้อหาก่อนหรือหลังเนื้อหาของ element

บทช่วยสอนนี้จะอภิปราย พร้อมตัวอย่าง วิธีใช้ ::before และ ::after pseudo-elements เพื่อตกแต่งเนื้อหาบนหน้าเว็บ จนจบการอ่านบทช่วยสอนนี้ คุณจะเป็นผู้เชี่ยวชาญในการใช้ ::before และ ::after pseudo-elements ใน CSS

CSS Pseudo-Elements

Pseudo-element เป็นคำสำคัญพิเศษที่ช่วยให้คุณจัดสไตล์ส่วนเฉพาะของ elements ที่ถูกเลือกโดย CSS selector เราจะอ้างถึง pseudo-elements ว่า selectors ตลอดบทความนี้ เพราะทุก pseudo-element เป็น selector

Pseudo-elements มีประโยชน์เมื่อคุณต้องการใช้สไตล์กับ element โดยไม่เพิ่ม CSS classes หรือ IDs ให้ element เช่น หากคุณต้องการเพิ่มลูกศร ">" หลังทุก link บนหน้าเว็บ คุณสามารถใช้ pseudo-element ได้

CSS เสนอ pseudo-elements หลากหลาย รวมถึง ::first-line, ::first-letter, ::before และ ::after สำหรับวัตถุประสงค์ของบทช่วยสอนนี้ เราจะเน้นสองตัวสุดท้าย: ::before และ ::after

Pseudo-elements มักแสดงด้วย double colon (::) แม้ CSS3 รองรับการใช้ single colon syntax (:) เพื่อประกาศ pseudo-element แต่การใช้ two colon notation เป็น best practice

เพราะ two colon notation ใช้เพื่อแยก pseudo-classes จาก pseudo-elements

CSS ::before Pseudo-Element

::before pseudo-element เพิ่มเนื้อหาที่ปรากฏก่อน element บนหน้าเว็บ บ่อยครั้ง element นี้ใช้เพื่อเพิ่มข้อความก่อน paragraph

ไวยากรณ์ของ ::before pseudo-element คือ:

selector::before { // CSS rules }

::before selector ถูกเพิ่มหลังชื่อของ element ที่คุณต้องการใช้ selector

นี่คือส่วนประกอบหลักของ ::before pseudo-element:

• selector อ้างถึง selector ที่ ::before ควรใช้ ดังนั้น หากคุณต้องการใช้ ::before element กับทุก "a" tag selector ของคุณจะเป็น "a" หรือ หากคุณต้องการใช้ ::before element ก่อนทุก element ที่มี class name "link" คุณจะใช้ selector ".link"
• ::before บอกเบราว์เซอร์ให้เพิ่มเนื้อหาของ CSS rules ก่อน selector
• CSS rules คือกฎที่ควรใช้ก่อน selector

หากคุณสนใจเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานของ selectors ใน CSS อ่านคู่มือ CSS selectors ของเรา

มาเดินผ่านตัวอย่างเพื่อสาธิตว่า ::before pseudo-element ทำงานอย่างไร

ตัวอย่าง ::before CSS

สมมติเราต้องการเพิ่ม link emoji (🔗) ก่อนทุก link บนหน้าเว็บตัวอย่าง เราสามารถทำภารกิจนี้ได้ด้วยโค้ดต่อไปนี้:

โค้ดของเราส่งคืน:

ในไฟล์ HTML ของเรา เรากำหนด HTML <a> tag ซึ่งลิงก์ไปยัง Career Karma homepage จากนั้น ในไฟล์ CSS ของเรา เราใช้ ::before pseudo-element เพื่อเพิ่ม link emoji ก่อนทุก <a> tag บนหน้าเว็บของเรา

เราทำได้โดยระบุ content property ในไฟล์ CSS ของเรา ซึ่งเป็นแบบนี้:

content: "🔗";

กฎของเราได้เพิ่ม link emoji ไปที่จุดเริ่มต้นของ <a> tag ที่เราสร้าง

ค่าสำหรับ attribute "content" สามารถเป็น:

• String เช่น "This is a string."
• Counter เช่น "counter(li);"
• Image เช่น "url(/path/to/image.png)"
• Blank string เช่น ""

คุณ ไม่สามารถ แทรก HTML element ลงใน content attribute

CSS ::after Pseudo-Element

CSS ::after pseudo-element อนุญาตให้เพิ่มเนื้อหาทันทีหลัง element บนหน้าเว็บ เหมือน ::before selector ::after มักใช้กับ links หรือ paragraphs ของข้อความ

ไวยากรณ์ของ ::after pseudo-element คือดังนี้:

selector::after { // CSS rules }

ไวยากรณ์สำหรับ ::after เหมือนกับไวยากรณ์สำหรับ ::before pseudo-element ::after ยอมรับค่าเดียวกันสำหรับ attribute "content" ที่เราพูดถึงก่อนหน้านี้

ตัวอย่าง ::after CSS

สมมติเรากำลังออกแบบ link element บนเว็บไซต์สำหรับร้านเบเกอรี่ชื่อ Hansons Bakery Link นี้ควรแสดงข้อความ "Go to the Hansons Bakery homepage." Link ของเราควรถูกล้อมรอบด้วย black border แบบ solid กว้าง 1px

"Career Karma เข้ามาในชีวิตฉันเมื่อฉันต้องการมันมากที่สุด และช่วยจับคู่ฉันกับ bootcamp ได้อย่างรวดเร็ว สองเดือนหลังจบ ฉันพบงานฝันที่สอดคล้องกับค่านิยมและเป้าหมายในชีวิต!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

หลัง label ของเรา เราต้องการกล่องข้อความปรากฏด้วยเนื้อหา This page shows off our baked goods menu. (สังเกต white space ก่อนคำ "This") กล่องของเราควรมีสีพื้นหลัง HTML สีส้ม

เราสามารถทำภารกิจนี้ได้ด้วยโค้ดต่อไปนี้:

index.html <a href="/" class="label">Go to the Hansons Bakery homepage.</a> styles.css .label { border: 1px solid black; } .label::after { content: " This page shows off our baked goods menu."; background-color: orange; }

โค้ดของเราสร้างเนื้อหาที่ดูเหมือนนี้:

ในโค้ดของเรา เรากำหนดลิงก์ไปยัง homepage ของเราโดยใช้ <a> tag Class name ที่เกี่ยวข้องกับลิงก์ของเราคือ .label

ในไฟล์ CSS ของเรา เราใช้ 1px-wide solid black border รอบทุก element ที่มี class name .label

จากนั้น เราใช้ ::after selector เพื่อสร้างกล่องข้อความที่เราอธิบายก่อนหน้านี้ กล่องข้อความแสดงเนื้อหา "This page shows off our baked goods menu." กล่องของเรามีสีพื้นหลังส้ม

สรุป

::before และ ::after pseudo-elements ช่วยให้คุณเพิ่มเนื้อหาไปยังส่วนเฉพาะของ element ที่คุณเลือกใน CSS rule ตัวอย่างเช่น ::before selector สามารถใช้เพื่อเพิ่มข้อความก่อน link ::after selector สามารถใช้เพื่อเพิ่ม emoji หลัง paragraph ของข้อความ

บทช่วยสอนนี้อภิปราย พร้อมอ้างอิงตัวอย่าง พื้นฐานของ pseudo-elements ใน CSS และวิธีใช้ ::before และ ::after pseudo-elements ตอนนี้คุณพร้อมที่จะเริ่มใช้ ::before และ ::after pseudo-elements ในโค้ด CSS ของคุณอย่างมืออาชีพเว็บดีไซน์เนอร์

สำหรับคำแนะนำเกี่ยวกับทรัพยากรการเรียนรู้ CSS web developer ชั้นนำ หนังสือ และคอร์ส ดูคู่มือ How to Learn CSS ของเรา