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

პსევდოელემენტი before ჩასვამს ტექსტს ელემენტის წინ. გამოიყენება მხოლოდ თვისებასთან 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:hover::before {
  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::before {
  color: red;
  content: '!!!';
}

Результат:

ასევე იხილეთ