CSS ::before &::after Selectors:คู่มือวิธีใช้ที่ใช้งานได้จริง

ตัวเลือก CSS ::before แทรกเนื้อหาก่อนองค์ประกอบที่เลือก CSS :after แทรกเนื้อหาหลังองค์ประกอบที่ระบุ ตัวเลือกเหล่านี้มักใช้เพื่อเพิ่มข้อความก่อนหรือหลังย่อหน้าหรือลิงก์

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

นั่นคือที่มาขององค์ประกอบหลอก CSS ::before และ ::after องค์ประกอบหลอกเหล่านี้ช่วยให้คุณสามารถแทรกเนื้อหาก่อนหรือหลังเนื้อหาขององค์ประกอบได้

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

องค์ประกอบหลอก CSS

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

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

CSS มีองค์ประกอบหลอกที่หลากหลาย ซึ่งรวมถึง ::บรรทัดแรก ::อักษรตัวแรก ::before และ ::after สำหรับวัตถุประสงค์ของบทแนะนำนี้ เราจะเน้นไปที่สองรายการสุดท้าย:::ก่อนและหลัง

โดยทั่วไปองค์ประกอบหลอกจะแสดงโดยใช้เครื่องหมายทวิภาคคู่ (::) แม้ว่า CSS3 จะรองรับการใช้ไวยากรณ์โคลอนเดี่ยว (:) ในการประกาศองค์ประกอบหลอก แต่การใช้เครื่องหมายทวิภาคสองตัวถือเป็นแนวปฏิบัติที่ดีที่สุด

นี่เป็นเพราะว่าเครื่องหมายทวิภาคสองตัวถูกใช้เพื่อแยกแยะคลาสเทียมจากองค์ประกอบหลอก

CSS ::ก่อนองค์ประกอบหลอก

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

ไวยากรณ์ของ ::before องค์ประกอบหลอกคือ:

selector::before {
 // CSS rules
}

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

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

• ตัวเลือก หมายถึงตัวเลือกที่ควรใช้ ::before ดังนั้น หากคุณต้องการใช้องค์ประกอบ ::before กับแท็ก “a” ทุกแท็ก ตัวเลือกของคุณจะเป็น “a” หรือหากคุณต้องการใช้ ::before องค์ประกอบก่อนทุกองค์ประกอบที่มีชื่อคลาส “link” คุณจะต้องใช้ตัวเลือก “.link”
• ::ก่อน บอกให้เบราว์เซอร์เพิ่มเนื้อหาของกฎ CSS ก่อนตัวเลือก
• กฎ CSS เป็นกฎที่ควรใช้ก่อนตัวเลือก

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

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

::ก่อนตัวอย่าง CSS

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

รหัสของเราส่งคืน:

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

กฎของเราได้เพิ่มลิงก์อิโมจิไว้ที่จุดเริ่มต้นของแท็ก ที่เราสร้างขึ้น

ค่าสำหรับแอตทริบิวต์ "เนื้อหา" สามารถเป็น:

• สตริง เช่น “นี่คือสตริง”
• ตัวนับ เช่น “ตัวนับ(li);”
• รูปภาพ เช่น “url(/path/to/image.png)”.
• สตริงว่าง เช่น “”

คุณไม่สามารถแทรกองค์ประกอบ HTML ลงในแอตทริบิวต์เนื้อหาได้

CSS ::หลังองค์ประกอบหลอก

CSS ::after องค์ประกอบหลอกอนุญาตให้เพิ่มเนื้อหาทันทีหลังจากองค์ประกอบบนหน้าเว็บ เช่นเดียวกับ ::before selector ::after มักใช้กับลิงก์หรือย่อหน้าของข้อความ

ไวยากรณ์ของ ::after องค์ประกอบหลอกมีดังนี้:

selector::after {
 // CSS rules
}

ไวยากรณ์ของ ::after เหมือนกับไวยากรณ์ของ ::before pseudo-element ::after ยอมรับค่าเดียวกันสำหรับแอตทริบิวต์ "เนื้อหา" ที่เรากล่าวถึงก่อนหน้านี้

::หลังจากตัวอย่าง CSS

สมมติว่าเรากำลังออกแบบองค์ประกอบลิงก์บนเว็บไซต์สำหรับร้านเบเกอรี่ชื่อ Hansons Bakery ลิงก์นี้ควรแสดงข้อความ “ไปที่หน้าแรกของ Hansons Bakery” ลิงก์ของเราควรล้อมรอบด้วยเส้นขอบสีดำทึบกว้าง 1px

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

Venus วิศวกรซอฟต์แวร์ที่ Rockbot

ค้นหาการแข่งขัน Bootcamp ของคุณ

หลังจากป้ายกำกับของเรา เราต้องการให้กล่องข้อความปรากฏพร้อมกับเนื้อหา หน้านี้แสดงเมนูขนมอบของเรา (สังเกตช่องว่างก่อนคำว่า “นี่”) กล่องของเราควรมีสีพื้นหลัง 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;
}

รหัสของเราได้สร้างเนื้อหาที่มีลักษณะดังนี้:

ในโค้ดของเรา เราได้กำหนดลิงก์ไปยังหน้าแรกของเราโดยใช้แท็ก ชื่อคลาสที่เกี่ยวข้องกับลิงก์ของเราคือ .label .