თვისება content

თვისება content საშუალებას აძლევს ჩასვათ თეგებში თვითნებური გენერირებადი ტექსტი. გამოიყენება პსევდოელემენტებთან after და before ერთად.

სინტაქსი

cssსელექტორი::after {
  content: 'ტექსტი';
}

cssსელექტორი::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: '???';
}

Результат:

იხილეთ აგრეთვე