Εκπαιδευτικός Οδηγός για τις Πseudo-elements CSS

CSS Pseudo-εлементα

Τα pseudo-εлементα του CSS χρησιμοποιούνται για τη ρύθμιση του στυλ συγκεκριμένων τμημάτων του στοιχείου.

Παράδειγμα, μπορεί να χρησιμοποιηθεί για:

  • Ρύθμιση του στυλ της πρώτης γραμμής ή της πρώτης γραμμής του στοιχείου
  • Εισαγωγή περιεχομένου πριν από ή μετά το περιεχόμενο του στοιχείου
  • Ρύθμιση του στυλ του σήματος της αντικειμενικής λίστας
  • Ρύθμιση του στυλ της προβολής του παρασκηνίου της συζήτησης

Η παρακάτω τаблицή παρουσιάζει τα διαφορετικά pseudo-εлементα του CSS:

Πseudo-εлемент Παράδειγμα Περιγραφή παραδείγματος
::after p::after Εισαγωγή περιεχομένου μετά από το περιεχόμενο του καθορισμένου στοιχείου.
::backdrop dialog::backdrop Ρύθμιση του στυλ της προβολής του παρασκηνίου της συζήτησης ή του στοιχείου αναδυόμενης.
::before p::before Εισαγωγή περιεχομένου πριν από το περιεχόμενο του καθορισμένου στοιχείου.
::file-selector-button ::file-selector-button Επιλογή του κουμπιού που τύχει του τύπου <input type="file">.
::first-letter p::first-letter Επιλογή της πρώτης γραμμής κάθε στοιχείου <p>.
::first-line p::first-line Επιλογή της πρώτης γραμμής κάθε στοιχείου <p>.
::grammar-error ::grammar-error Ρύθμιση του στυλ κειμένου που σηματοδοτείται από τον περιηγητή ως λάθος γραμματική.
::highlight() ::highlight(custom-name) Επιλογή προσαρμοσμένης έντονης γραμμής.
::marker ::marker Επιλογή του σήματος για την επιλογή της αντικειμενικής λίστα.
::placeholder input::placeholder Ρύθμιση του στυλ κειμένου του κειμένου αντικατάστασης για τα στοιχεία <input> ή <textarea>.
::selection ::selection Ρύθμιση του στυλ κειμένου που επιλέγεται από τον χρήστη.
::spelling-error ::spelling-error Ρύθμιση του στυλ κειμένου που σηματοδοτείται από τον περιηγητή ως λάθος γράψιμο.
::view-transition ::view-transition Παρουσίαση της ρίζας του επιπλέον στρώματος μετάβασης εμφάνισης, που περιέχει όλες τις μετάβασεις εμφάνισης στην ιστοσελίδα.
::view-transition-group ::view-transition-group Παρουσίαση του συνόλου των στιγμιότυπων μετάβασης μιας μόνο εμφάνισης.
::view-transition-image-pair ::view-transition-image-pair Εμφάνιση μετάβασης της εμφάνισης της εμφάνισης της παλιάς και της νέας κατάστασης της εμφάνισης (πριν και μετά την μετάβαση).
::view-transition-new ::view-transition-new Αναπαράσταση του 'νέου' κατάστασης προβολής μετάβασης.
::view-transition-old ::view-transition-old Αναπαράσταση του 'παλιού' κατάστασης προβολής μετάβασης.