Τι είναι ένα ψευδο-στοιχείο;

Το ψευδο-στοιχείο στο CSS είναι μια λέξη-κλειδί που προστίθεται σε έναν επιλεκτή, επιτρέποντας το στυλ ενός συγκεκριμένου μέρους του στοιχείου χωρίς να δημιουργούνται ρητά επιπλέον στοιχεία DOM.

Τα πιο συχνά χρησιμοποιούμενα ψευδο-στοιχεία είναι:

• ::before: Εισάγει γενετικό περιεχόμενο πριν από το περιεχόμενο του επιλεγμένου στοιχείου.
• ::after: Εισάγει γενετικό περιεχόμενο μετά το περιεχόμενο του επιλεγμένου στοιχείου.
• ::first-line: Εφαρμόζει στυλ στην πρώτη γραμμή ενός μπλοκ στοιχείου.
• ::first-letter: Εφαρμόζει στυλ στο πρώτο γράμμα ενός μπλοκ στοιχείου.
• ::selection: Εφαρμόζει στυλ στο μέρος του στοιχείου που έχει επιλεγεί από τον χρήστη (π.χ. κατά την επιλογή κειμένου με το ποντίκι).
• ::placeholder: Εφαρμόζει στυλ στο κείμενο υπόδειξης σε πεδία <input> ή <textarea>.

Παράδειγμα χρήσης των ::before και ::after:

div::before {
  content: "Πρόθεμα: "; // Υποχρεωτική ιδιότητα content
  color: blue;
}

div::after {
  content: " Επίθημα"; // Υποχρεωτική ιδιότητα content
  color: red;
}

Παράδειγμα χρήσης των ::first-line και ::first-letter:

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.1em;
}

Τα ψευδο-στοιχεία είναι χρήσιμα για την προσθήκη διακοσμητικών στοιχείων, τη δημιουργία περιεχομένου, το στυλ των τμημάτων κειμένου και άλλες εργασίες, απλοποιώντας τη δομή HTML. Ιστορικά ξεκινούσαν με ένα μόνο άνω κάτω τελεία (:), αλλά η προδιαγραφή CSS3 εισήγαγε δύο άνω κάτω τελείες (::) για τη διάκριση μεταξύ ψευδο-κλάσεων (:hover, :focus) και ψευδο-στοιχείων, αν και ένα μόνο άνω κάτω τελεία (:) εξακολουθεί να υποστηρίζεται από τις περισσότερες browsers για παλιά ψευδο-στοιχεία. Συνιστάται η χρήση του ::.