რა არის ფსევდო-ელემენტები, როგორიცაა ::before და ::after?

Question

Accepted Answer

**ფსევდო-ელემენტი** (ორმაგი კოლონი `::`) აერთიანებს ელემენტის კონკრეტულ *ნაწილს*, ან **აქმნის კონტენტს**, რომელიც HTML-ში არ არის — დამატებითი markup-ის დამატების გარეშე. ## რატომ არის ეს მნიშვნელოვანი ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` `content` თვისება სავალდებულოა — მის გარეშე, ფსევდო-ელემენტი არ გამოდის. გენერირებული კონტენტი ელემენტის ძალიან დასაწყისი (`::before`) ან ბოლო (`::after`) ბავშვია. ## დეკორატიული ფორმები დამატებითი div-ების გარეშე ```css .tooltip::after { content: ""; /* empty but present → creates a box */ position: absolute; border: 8px solid transparent; border-top-color: black; /* a CSS triangle (tooltip arrow) */ } ``` ეს კლასიკური გამოყენება: ისრების, ბეჯების, overlay-ებისა და დეკორატიული ხაზების დახატვა — HTML-ის დაზღვევა სუფთად წისუფტად ვიზუალური ელემენტებისგან. ## სხვა ფსევდო-ელემენტები (ელემენტის ნაწილის სტილი) ```css p::first-line { font-weight: bold; } /* the first rendered line */ p::first-letter { font-size: 3em; } /* drop cap */ ::selection { background: yellow; } /* highlighted/selected text */ input::placeholder { color: gray; } /* placeholder text */ ``` ## ერთი vs ორი კოლონი ```css .x:hover { } /* pseudo-CLASS (state) — one colon */ .x::before { } /* pseudo-ELEMENT (a part) — two colons */ ``` CSS3 შემოიტანა `::` ფსევდო-ელემენტების ფსევდო-კლასებისგან განასხვავებლად (ბრაუზერები კვლავ იღებენ ერთ კოლონს ძველ ელემენტებზე თავსებადობისთვის, მაგრამ გამოიყენეთ `::`). ## ხელმისაწვდომობის შენიშვნა გენერირებული `content` გარკვეულმა ეკრანის წამკითხველმა წაიკითხოს — არ მოათავსოთ აუცილებელი ინფორმაცია მხოლოდ `::before`/`::after`-ში (გამოიყენეთ დეკორაციისთვის), და დეკორატიული ხატები საუკეთესოდ გამოტოვებულია ხელმისაწვდომობის ხეს. ## რატომ არის ეს მნიშვნელოვანი ფსევდო-ელემენტები გაძლევთ ხატების, დეკორატიული ფორმების (ისრები, გამყოფი), drop caps და მრიცხველების დამატების საშუალებას წმინდად CSS-ში — არ არის დამატებითი `

`ი ან `` საჭირო. ისინი აწვდიან markup-ს სემანტიკურს აღრთვისას მდიდარი ვიზუალური დეტალები, და ისინი სუფთა, ხელმისაწვდომი სტილის საფუძველია.