პსევდოელემენტი after

პსევდოელემენტი after ჩასვამს ტექსტს ელემენტის შემდეგ. გამოიყენება მხოლოდ თანამშრომლობით თვისებასთან content, რომელიც განსაზღვრავს ტექსტს, რომელიც უნდა ჩასვათ.

სინტაქსი

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

მაგალითი

მოდით გავაკეთოთ ისე, რომ როდესაც li-ზე დავააწhovებთ, მის ბოლოში ჩაისვას ტექსტი:

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

cssli:hover::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:hover::after {
  color: red;
  content: '!!!';
}

Результат:

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