คุณสมบัติ content

คุณสมบัติ content ช่วยให้สามารถแทรก ข้อความที่สร้างขึ้นตามต้องการลงในแท็ก ใช้งาน ร่วมกับ pseudoelement after และ before

Syntax

cssselector::after {
  content: 'ข้อความ';
}

cssselector::before {
  content: 'ข้อความ';
}

ตัวอย่าง

มาแทรกข้อความเพิ่มเติมที่จุดเริ่มต้นและจุดสิ้นสุดของข้อความในแท็ก li กัน:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli::before {
  content: '!!!';
}
li::after {
  content: '???';
}

Результат:

ตัวอย่าง

สามารถนำสไตล์ต่าง ๆ ไปใช้กับข้อความที่แทรกได้ มาลองเปลี่ยนสีข้อความนี้เป็น สีอื่นดู:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli::before {
  color: red;
  content: '!!!';
}
li::after {
  color: green;
  content: '???';
}

Результат:

ดูเพิ่มเติม