CSS ::before โฉมประกอบ

การระบุและการใช้งาน

CSS ::before โฉมประกอบใช้เพื่อใส่เนื้อหาบางส่วนก่อนเนื้อหาขององค์ประกอบที่กำหนด

ใช้ content ค่าของ属性: content: " (" attr(href) ")";

• ข้อความ: 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 โฉมประกอบ