CSS ::before โฉมแบบ

การประกาศและการใช้งาน

CSS ::before โฉมแบบใช้เพื่อแทรกสิ่งต่างๆ ก่อนหน้าตัวเลือกที่กำหนด

ใช้ content ค่าที่กำหนดสิ่งที่ต้องแทรก ค่าของ content สามารถเป็น

• ตัวอักษร：content: "Hello world!";
• รูปภาพ：content: url(myimage.jpg);
• ไม่มีสิ่งใด：content: none;
• นับเลขานุสรณ์：content: counter(li);
• คำว่าโดยเฉพาะ：content: open-quote;
• ค่าทรัพยากร：content: " (" attr(href) ")";

คำแนะนำ：โปรดทราบว่าสิ่งที่แทรกยังคงอยู่ภายในตัวเลือกที่กำหนด สิ่งที่แทรกจะถูกเพิ่มเข้าไปก่อนสิ่งอื่นๆ ที่อยู่ภายในตัวเลือก

ใช้ ::after แทรกสิ่งต่างๆ หลังจากองค์ประกอบของตัวเลือกที่เฉพาะ

ตัวอย่าง

ตัวอย่าง 1

แทรกตัวอักษรเข้าไปก่อนหน้าหาทุกองค์ประกอบของ <p>

p::before {
  content: "Read this: ";
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

แทรกตัวอักษรเข้าไปก่อนหน้าหาทุกองค์ประกอบของ <p> โดยตั้งรูปแบบของสิ่งที่แทรกเข้าไป

p::before {
  content: "Read this -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

ทดลองด้วยตัวเอง

CSS ภาษา

::before {
  css declarations;
}

รายละเอียดเทคนิค

การสนับสนุนบราวเซอร์

ตัวเลขในตารางหมายถึงเวอร์ชันบราวเซอร์แรกที่สนับสนุนโฉมแบบนี้อย่างเต็มที่。

หน้าที่เกี่ยวข้อง

ความสำคัญ：CSS โฉมแบบ

อ้างอิง：CSS ::after โฉมแบบ