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 โฉมแบบที่ไม่มีความหมาย