CSS ::after องค์ประกอบแบบปูระหว่าง

การเขียนและการใช้งาน

CSS ::after ฉลากสำหรับใส่เนื้อหาบางส่วนหลังเนื้อหาขององค์ประกอบที่กำหนด

ใช้ content ขอบเขตที่กำหนดเนื้อหาที่ต้องการใส่。ค่าของ content อาจเป็น:

• ตัวอักษร: content: "Hello world!";
• รูปภาพ: content: url(myimage.jpg);
• ไม่มีเนื้อหา: content: none;
• นับเลข: content: counter(li);
• เครื่องหมายเชิญ: content: close-quote;
• ค่าของ属性: content: " (" attr(href) ")";

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

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

ตัวอย่าง

ตัวอย่าง 1

ใส่ตัวอักษรภายหลังเนื้อหาของ <p> อันเดียวไปโดยตรง

p::after {
  content: " - จำไว้ได้";
}

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

ตัวอย่าง 2

ใส่ตัวอักษรภายหลังเนื้อหาของ <p> อันเดียวไปโดยตรง และตั้งรูปแบบของเนื้อหาที่ใส่ใน

p::after {
  content: " - จำไว้ได้";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

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

CSS ภาษา

::after {
  css declarations;
}

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

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

ตัวเลขในตารางนี้ระบุสูตรบริการของเบราเซอร์ครั้งแรกที่สนับสนุนฉลากนี้อย่างเต็มที่。

เพิ่มเติม

ความรู้ที่สำคัญCSS ฉลาก

อ้างอิง：CSS ::before องค์ประกอบแบบปูระหว่าง