Content xassəsi

content xassəsi teqlərə ixtiyari generasiya edilmiş mətni əlavə etməyə imkan verir. after və before pseudoelementləri ilə birlikdə tətbiq edilir.

Sintaksis

cssselektor::after {
  content: 'mətn';
}

cssselektor::before {
  content: 'mətn';
}

Nümunə

Gəlin li teqinin mətninin əvvəlinə və sonuna əlavə mətni daxil edək:

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: '???';
}

Результат:

Nümunə

Əlavə edilmiş mətnə müxtəlif stillər tətbiq etmək olar. Gəlin, məsələn, bu mətni hansısa bir rəngə boyayaq:

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: '???';
}

Результат:

Həmçinin bax