เนื้อหา ::before และ ::after
แทรกเนื้อหาที่สร้างขึ้นก่อนหรือหลังองค์ประกอบโดยใช้ ::before และ ::after ร่วมกับคุณสมบัติ content
เนื้อหา ::before และ ::after เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
องค์ประกอบเทียมคืออะไร
องค์ประกอบเทียมสร้างองค์ประกอบเสมือนที่จัดรูปแบบได้เสมือนเป็นส่วนหนึ่งของ DOM โดยใช้โคลอนคู่ :: องค์ประกอบที่ใช้บ่อยที่สุดคือ ::before และ ::after
::before และ ::after
::before แทรกเนื้อหาที่สร้างขึ้นก่อนเนื้อหาขององค์ประกอบ ส่วน ::after แทรกเนื้อหาหลังเนื้อหาดังกล่าว ทั้งสองแบบต้องใช้คุณสมบัติ content จึงจะแสดงผล
<span class="element">Text with generated content</span>พร็อพเพอร์ตี content
พร็อพเพอร์ตี content รองรับสิ่งต่อไปนี้:
- สตริง:
content: "text" - สตริงว่าง:
content: ""(มักใช้กับรูปร่างตกแต่ง) - ที่อยู่เว็บ:
content: url("icon.svg") - ตัวนับ:
content: counter(step) - attr():
content: attr(data-tooltip)
เครื่องหมายอัญประกาศตกแต่ง
เพิ่มเครื่องหมายอัญประกาศแบบตัวพิมพ์โดยไม่ต้องเพิ่มลงใน HTML:
<blockquote>Design is not just what it looks like — design is how it works.</blockquote>รูปร่างที่มี content ว่าง
การตั้งค่า content: "" ร่วมกับตำแหน่งและขนาด จะสร้างรูปร่างตกแต่งได้โดยไม่ต้องเพิ่ม HTML:
<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>การล้าง float ด้วย ::after
วิธีล้าง float แบบดั้งเดิมใช้ ::after เพื่อล้างการลอยโดยไม่ต้องเพิ่มมาร์กอัป:
<div class="clearfix" style="border:1px solid #ccc;">
<div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>คำแนะนำเครื่องมือด้วย ::after
คำแนะนำเครื่องมือที่ใช้ CSS เท่านั้น โดยใช้ ::after และ attr():
<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>ไอคอนด้วย content: url()
แทรกไอคอนขนาดเล็กก่อนลิงก์โดยใช้ content: url():
<a href="https://example.com" target="_blank" rel="noopener">External link</a>ข้อจำกัดขององค์ประกอบเทียม
องค์ประกอบเทียมไม่ได้อยู่ใน DOM โดยมีข้อจำกัดดังนี้:
- ผู้ใช้ไม่สามารถเลือกหรือค้นหาได้
- โปรแกรมอ่านหน้าจอจะไม่รองรับโดยค่าเริ่มต้น
- JavaScript ไม่สามารถกำหนดเป้าหมายได้
อย่าวางเนื้อหาสำคัญไว้ในเนื้อหาที่สร้างขึ้น — ควรใช้สิ่งเหล่านี้เพื่อการตกแต่งเท่านั้น
โคลอนเดี่ยวเทียบกับโคลอนคู่
โคลอนเดี่ยว (:before) เป็นไวยากรณ์ของ CSS2 ส่วนโคลอนคู่ (::before) เป็นมาตรฐานของ CSS3 ที่ใช้แยกองค์ประกอบเทียมออกจากคลาสเทียม ทั้งสองแบบใช้งานได้ในเบราว์เซอร์สมัยใหม่ แต่สำหรับโค้ดใหม่ควรใช้โคลอนคู่
องค์ประกอบใดรองรับ ::before/::after
องค์ประกอบที่ถูกแทนที่ (img, input, select, video) ไม่สามารถมีองค์ประกอบเทียมได้ เนื่องจากไม่มีพื้นที่เนื้อหาสำหรับแทรก ให้ใช้องค์ประกอบตัวห่อหุ้มสำหรับการตกแต่งแทน
ตรวจสอบความเข้าใจ
ค่า content ใดจำเป็นสำหรับองค์ประกอบเทียม ::before ที่ใช้เพื่อการตกแต่งและไม่มีข้อความที่มองเห็นได้
สรุปทบทวน
::before และ ::after ใช้แทรกเนื้อหาที่สร้างขึ้นรอบเนื้อหาจริงขององค์ประกอบ พร็อพเพอร์ตี content เป็นสิ่งจำเป็น ควรใช้สิ่งเหล่านี้กับรูปร่างตกแต่ง ไอคอน เครื่องหมายอัญประกาศ และคำแนะนำเครื่องมือเท่านั้น — ห้ามใช้กับเนื้อหาที่มีความหมายและผู้ใช้จำเป็นต้องเข้าถึงหรืออ่าน
คำถามที่พบบ่อย
บทเรียน “เนื้อหา ::before และ ::after” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เนื้อหา ::before และ ::after” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เนื้อหา ::before และ ::after”
แทรกเนื้อหาที่สร้างขึ้นก่อนหรือหลังองค์ประกอบโดยใช้ ::before และ ::after ร่วมกับคุณสมบัติ content คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “เนื้อหา ::before และ ::after” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เนื้อหา ::before และ ::after
- ::placeholder ::selection และ ::marker
- ตัวนับ CSS ด้วย ::before
- ลวดลายตกแต่งด้วยองค์ประกอบเสมือน