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

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

სინტაქსი

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

მაგალითი

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

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

li:hover::after {
	content: '!!!';
}

მაგალითი

ჩასასმელ ტექსტს შეგიძლიათ სხვადასხვა სტილის გამოყენება. გავაფერადოთ, მაგალითად, ეს ტექსტი რაიმე ფერში:

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

li:hover::after {
	color: red;
	content: '!!!';
}

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

პსევდოელემენტი before,
რომელიც აკეთებს ჩასმას ტეგის ტექსტის წინ
ფუნქცია attr,
რომელიც იღებს ტეგის ატრიბუტის მნიშვნელობას
თვისება counter-increment,
რომელიც განსაზღვრავს ავტომატურ ნუმერაციას