Ένα ψευδο-στοιχείο (διπλή άνω τελεία ::) διαμορφώνει ένα συγκεκριμένο μέρος ενός στοιχείου ή δημιουργεί περιεχόμενο που δεν υπάρχει στο HTML — χωρίς να προσθέτει επιπλέον σήμανση.
{
: ;
}
{
: ;
}
Η ιδιότητα content είναι υποχρεωτική — χωρίς αυτήν, το ψευδο-στοιχείο δεν εμφανίζεται. Το δημιουργημένο περιεχόμενο είναι ένα θυγατρικό στοιχείο στην αρχή (::before) ή στο τέλος (::after) του στοιχείου.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
Αυτή είναι η κλασική χρήση: σχεδίαση βελών, ταμπέλων, επικαλύψεων, διακοσμητικών γραμμών — διατήρηση του HTML καθαρού από καθαρά οπτικά στοιχεία.
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 */
.x:hover { } /* pseudo-CLASS (state) — one colon */
.x::before { } /* pseudo-ELEMENT (a part) — two colons */
Το CSS3 εισήγαγε :: για να διακρίνει τα ψευδο-στοιχεία από τις ψευδο-κλάσεις (τα προγράμματα περιήγησης εξακολουθούν να δέχονται μία άνω τελεία στις παλιές για συμβατότητα, αλλά χρησιμοποιήστε ::)
Το δημιουργημένο περιεχόμενο διαβάζεται από ορισμένες οθόνες ανάγνωσης — μην τοποθετήσετε ουσιαστικές πληροφορίες μόνο στο ::before/::after (χρησιμοποιήστε το για διακόσμηση), και τα διακοσμητικά εικονίδια είναι καλύτερα να παραμένουν εκτός του δέντρου προσβασιμότητας.
Τα ψευδο-στοιχεία σας επιτρέπουν να προσθέτετε εικονίδια, διακοσμητικά σχήματα (βέλη, διαχωριστικά), πρώτα κεφάλαια και μετρητές καθαρά στο CSS — χωρίς επιπλέον <div>s ή <span>s.
Διατηρούν τη σήμανση σημασιολογική ενώ ενεργοποιούν πλούσια οπτικές λεπτομέρειες, και είναι ένα στοιχείο κλειδί του καθαρού, συντηρήσιμου styling.