Хосияти content

Хосияти content имкон медиҳад, ки ба тегҳо матни ихтиёрии тавлидшуда дохил карда шавад. Татбиқ карда мешавад ҳамроҳ бо псевдоэлементҳои after ва before.

Синтаксис

cssинтихобкунанда::after {
  content: 'матн';
}
cssинтихобкунанда::before {
  content: 'матн';
}

Намуна

Биёед ба оғоз ва поёни матни теги li матни иловагӣ дохил кунем:

html<ul>
  <li>ашёи рӯйхат</li>
  <li>ашёи рӯйхат</li>
  <li>ашёи рӯйхат</li>
  <li>ашёи рӯйхат</li>
  <li>ашёи рӯйхат</li>
</ul>
cssli::before {
  content: '!!!';
}
li::after {
  content: '???';
}

Результат:

Намуна

Ба матни дохилшаванда метавон усулҳои гуногунро татбиқ кард. Барои намуна, ин матро ба як ранги дилхоҳ ранг кунем:

html<ul>
  <li>ашёи рӯйхат</li>
  <li>ашёи рӯйхат</li>
  <li>ашёи рӯйхат</li>
  <li>ашёи рӯйхат</li>
  <li>ашёи рӯйхат</li>
</ul>
cssli::before {
  color: сурх;
  content: '!!!';
}
li::after {
  color: сабз;
  content: '???';
}

Результат:

Нигаред низ

  • функсияи attr,
    ки арзиши сифати тегро мегирад
  • хосияти counter-increment,
    ки шуморагузории худкорро муайян мекунад