Τα ψευδο-στοιχεία (pseudo-elements) της CSS χρησιμοποιούνται για να διαμορφώσουν συγκεκριμένα μέρη ενός στοιχείου.
Για παράδειγμα, μπορούν να χρησιμοποιηθούν για:
- Να διαμορφώσουν τον πρώτο χαρακτήρα ή γραμμή ενός στοιχείου.
- Να εισάγουν περιεχόμενο πριν ή μετά το περιεχόμενο ενός στοιχείου.
Τα πιο συνηθισμένα ψευδο-στοιχεία είναι:
::first-letter: Επιλέγει τον πρώτο χαρακτήρα ενός στοιχείου.::first-line: Επιλέγει την πρώτη γραμμή ενός στοιχείου.::before: Εισάγει περιεχόμενο πριν το περιεχόμενο ενός στοιχείου.::after: Εισάγει περιεχόμενο μετά το περιεχόμενο ενός στοιχείου.
Για παράδειγμα, μπορείτε να χρησιμοποιήσετε το ψευδο-στοιχείο ::first-letter για να εφαρμόσετε μια διαφορετική μορφοποίηση στον πρώτο χαρακτήρα ενός κειμένου:
p::first-letter {
font-size: 2em;
font-weight: bold;
}
Με αυτόν τον τρόπο, ο πρώτος χαρακτήρας κάθε παραγράφου θα έχει μεγαλύτερο μέγεθος γραμματοσειράς και θα είναι έντονος.
Η σύνταξη των ψευδο-στοιχείων είναι η εξής:
selector::pseudo-element {
/* styles */
}
Πρέπει να ακολουθήσετε τα παρακάτω βήματα:
- Επιλέξτε τον επιθυμητό επιλογέα (selector) για το στοιχείο στο οποίο θέλετε να εφαρμόσετε το ψευδο-στοιχείο.
- Προσθέστε δύο διπλά άνω τελεία (::) μετά τον επιλογέα.
- Συμπληρώστε το ψευδο-στοιχείο που θέλετε να εφαρμόσετε, όπως
first-letter,first-line,beforeήafter. - Ορίστε τις μορφοποιήσεις που θέλετε να εφαρμόσετε μέσα στα αγκύλια.
[adinserter block=”2″]
Για παράδειγμα, ας πούμε ότι θέλετε να εισάγετε περιεχόμενο μετά το περιεχόμενο ενός στοιχείου:
p::after {
content: " - Προσθήκη κειμένου μετά";
color: red;
}
Με αυτόν τον τρόπο, θα εμφανιστεί ένα παύλακι και το κείμενο “Προσθήκη κειμένου μετά” με κόκκινο χρώμα μετά το περιεχόμενο κάθε παραγράφου.
Το ψευδο-στοιχείο ::first-line χρησιμοποιείται για να προσθέσετε ένα ειδικό στυλ στην πρώτη γραμμή ενός κειμένου.
Το παρακάτω παράδειγμα διαμορφώνει την πρώτη γραμμή του κειμένου σε όλα τα στοιχεία
:
p::first-line {
font-weight: bold;
color: blue;
}
Με αυτόν τον τρόπο, η πρώτη γραμμή κάθε παραγράφου θα έχει έντονη γραμματοσειρά και μπλε χρώμα.
Σημείωση: Το ψευδο-στοιχείο ::first-line εφαρμόζεται μόνο σε μερικά στοιχεία, όπως τα παραγράφου, και δεν είναι διαθέσιμο σε όλα τα στοιχεία της ιστοσελίδας.
Οι παρακάτω ιδιότητες εφαρμόζονται στο ψευδο-στοιχείο ::first-line:
- Ιδιότητες γραμματοσειράς (font properties)
- Ιδιότητες χρώματος (color properties)
- Ιδιότητες φόντου (background properties)
- Απόσταση μεταξύ λέξεων (word-spacing)
- Απόσταση μεταξύ γραμμάτων (letter-spacing)
- Διακόσμηση κειμένου (text-decoration)
- Κατακόρυφη ευθυγράμμιση (vertical-align)
- Μετασχηματισμός κειμένου (text-transform)
- Υψομετρικός διάκενος (line-height)
- Καθαρισμός (clear)
Μπορείτε να εφαρμόσετε αυτές τις ιδιότητες στο ψευδο-στοιχείο ::first-line με τον ίδιο τρόπο που θα τις εφαρμόζατε σε οποιοδήποτε άλλο στοιχείο.
Για παράδειγμα, ας πούμε ότι θέλετε να εφαρμόσετε έναν κόκκινο χρώμα και έντονη γραμματοσειρά στην πρώτη γραμμή ενός κειμένου:
p::first-line {
color: red;
font-weight: bold;
}
Με αυτόν τον τρόπο, η πρώτη γραμμή του κειμένου σε κάθε παράγραφο θα έχει κόκκινο χρώμα και θα είναι έντονη. Μπορείτε να συνδυάσετε και άλλες ιδιότητες για να επιτύχετε τον επιθυμητό στυλ.
Το ψευδο-στοιχείο ::first-letter χρησιμοποιείται για να προσθέσετε ένα ειδικό στυλ στο πρώτο γράμμα ενός κειμένου.
Το παρακάτω παράδειγμα διαμορφώνει το πρώτο γράμμα του κειμένου σε όλα τα στοιχεία <p>:
p::first-letter {
font-size: 2em;
font-weight: bold;
color: red;
}
Με αυτόν τον τρόπο, το πρώτο γράμμα κάθε παραγράφου θα έχει διπλάσιο μέγεθος γραμματοσειράς, θα είναι έντονο και θα έχει κόκκινο χρώμα.
Σημείωση: Το ψευδο-στοιχείο ::first-letter εφαρμόζεται μόνο σε κάποια στοιχεία, όπως τα παραγράφου <p>, και δεν είναι διαθέσιμο σε όλα τα στοιχεία της ιστοσελίδας.
Σημείωση: Το ψευδο-στοιχείο ::first-letter μπορεί να εφαρμοστεί μόνο σε στοιχεία επιπέδου μπλοκ (block-level elements).
Οι παρακάτω ιδιότητες εφαρμόζονται στο ψευδο-στοιχείο ::first-letter:
- Ιδιότητες γραμματοσειράς (font properties)
- Ιδιότητες χρώματος (color properties)
- Ιδιότητες φόντου (background properties)
- Ιδιότητες περιθωρίου (margin properties)
- Ιδιότητες ανακατανομής (padding properties)
- Ιδιότητες περιγράμματος (border properties)
- Διακόσμηση κειμένου (text-decoration)
- Κατακόρυφη ευθυγράμμιση (vertical-align) (μόνο αν το “float” είναι “none”)
- Μετασχηματισμός κειμένου (text-transform)
- Υψομετρικός διάκενος (line-height)
- Αλλαγή θέσης (float)
- Καθαρισμός (clear)
Μπορείτε να εφαρμόσετε αυτές τις ιδιότητες στο ψευδο-στοιχείο ::first-letter με τον ίδιο τρόπο που θα τις εφαρμόζατε σε οποιοδήποτε άλλο στοιχείο. Αυτές οι ιδιότητες σας επιτρέπουν να προσαρμόσετε το στυλ του πρώτου γράμματος ενός κειμένου σύμφωνα με τις ανάγκες σας.
Τα ψευδο-στοιχεία μπορούν να συνδυαστούν με τις κλάσεις HTML για να εφαρμόσετε ειδικά στυλ σε συγκεκριμένα στοιχεία.
Ας υποθέσουμε ότι έχουμε την εξής HTML κωδικοποίηση:
<p class="special">Αυτή είναι μια παράγραφος με κλάση special.</p>
Μπορούμε να συνδυάσουμε την κλάση “special” με ένα ψευδο-στοιχείο για να εφαρμόσουμε ειδικό στυλ στο πρώτο γράμμα της παραγράφου. Για παράδειγμα:
p.special::first-letter {
font-size: 2em;
font-weight: bold;
color: red;
}
Με αυτόν τον τρόπο, μόνο το πρώτο γράμμα των παραγράφων με την κλάση “special” θα έχει διπλάσιο μέγεθος γραμματοσειράς, θα είναι έντονο και θα έχει κόκκινο χρώμα.
Μπορείτε να συνδυάσετε ψευδο-στοιχεία με κλάσεις HTML για να προσδώσετε ειδικά στυλ σε συγκεκριμένα στοιχεία που πληρούν ορισμένες συνθήκες ή κριτήρια. Αυτό σας δίνει μεγαλύτερη ευελιξία στον τρόπο που διαμορφώνετε την εμφάνιση των στοιχείων στην ιστοσελίδα σας.
[adinserter block=”3″]
Μπορούν να συνδυαστούν πολλαπλά ψευδο-στοιχεία.
Στο παρακάτω παράδειγμα, το πρώτο γράμμα μιας παραγράφου θα είναι κόκκινο, με μέγεθος γραμματοσειράς xx-large. Το υπόλοιπο της πρώτης γραμμής θα είναι μπλε και με κεφαλαία γράμματα μικρής σειράς (small-caps). Το υπόλοιπο της παραγράφου θα έχει το προεπιλεγμένο μέγεθος και χρώμα γραμματοσειράς:
p::first-letter {
color: red;
font-size: xx-large;
}
p::first-line {
color: blue;
text-transform: uppercase;
}
p {
font-size: initial;
color: initial;
}
Με αυτόν τον τρόπο, μπορούμε να ορίσουμε διαφορετικά στυλ για το πρώτο γράμμα, την πρώτη γραμμή και το υπόλοιπο της παραγράφου. Αυτό μας επιτρέπει να δώσουμε έμφαση σε συγκεκριμένα μέρη του κειμένου και να τα προσαρμόσουμε σύμφωνα με τις απαιτήσεις σχεδιασμού μας.
CSS – Το ψευδο-στοιχείο ::before
Το ψευδο-στοιχείο ::before μπορεί να χρησιμοποιηθεί για να εισαγάγετε κάποιο περιεχόμενο πριν από το περιεχόμενο ενός στοιχείου.
Το παρακάτω παράδειγμα εισάγει μια εικόνα πριν από το περιεχόμενο κάθε στοιχείου <h1>:
h1::before {
content: url(image.png);
}
Σε αυτό το παράδειγμα, χρησιμοποιούμε τη δήλωση ::before για να δημιουργήσουμε ένα ψευδο-στοιχείο πριν από το περιεχόμενο κάθε στοιχείου <h1>. Η ιδιότητα “content” ορίζει το περιεχόμενο που θα εισαχθεί, σε αυτή την περίπτωση μια εικόνα με το URL “image.png”.
Μπορείτε να προσαρμόσετε τη δήλωση ::before ανάλογα με τις ανάγκες σας. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε διαφορετικούς τύπους περιεχομένου όπως κείμενο, σύμβολα ή άλλες εικόνες.
Η χρήση του ::before pseudo-στοιχείου επιτρέπει να προσθέσετε επιπλέον στυλ ή περιεχόμενο πριν από ένα στοιχείο χωρίς να αλλάξετε τον πραγματικό κώδικα HTML.
CSS – Το ψευδο-στοιχείο ::after
Το ψευδο-στοιχείο ::after μπορεί να χρησιμοποιηθεί για να εισαγάγετε κάποιο περιεχόμενο μετά το περιεχόμενο ενός στοιχείου.
Το παρακάτω παράδειγμα εισάγει ένα κείμενο μετά το περιεχόμενο κάθε στοιχείου <p>:
p::after {
content: " - Τέλος";
font-style: italic;
}
Σε αυτό το παράδειγμα, χρησιμοποιούμε τη δήλωση ::after για να δημιουργήσουμε ένα ψευδο-στοιχείο μετά το περιεχόμενο κάθε στοιχείου <p>. Η ιδιότητα “content” ορίζει το περιεχόμενο που θα εισαχθεί, σε αυτή την περίπτωση το κείμενο “- Τέλος”. Επίσης, χρησιμοποιούμε την ιδιότητα “font-style” για να ορίσουμε το κείμενο με πλάγια γραφή (italic).
Μπορείτε να προσαρμόσετε τη δήλωση ::after ανάλογα με τις ανάγκες σας. Μπορείτε να χρησιμοποιήσετε διάφορους τύπους περιεχομένου και να εφαρμόσετε διάφορα στυλ, όπως χρώματα, γραμματοσειρές και περιθώρια.
Η χρήση του ::after pseudo-στοιχείου επιτρέπει να προσθέσετε επιπλέον στυλ ή περιεχόμενο μετά από ένα στοιχείο χωρίς να αλλάξετε τον πραγματικό κώδικα HTML.
CSS – Το ψευδο-στοιχείο ::marker
Το ψευδο-στοιχείο ::marker επιλέγει τα δείκτες των στοιχείων λίστας.
Το παρακάτω παράδειγμα επιλέγει τους δείκτες των στοιχείων λίστας:
li::marker {
color: red;
font-weight: bold;
}
Σε αυτό το παράδειγμα, χρησιμοποιούμε τη δήλωση ::marker για να επιλέξουμε τους δείκτες των στοιχείων λίστας. Οι δηλώσεις που ακολουθούν (στην περίπτωση μας, η αλλαγή του χρώματος σε κόκκινο και η έντονη γραφή του κειμένου) εφαρμόζονται στους δείκτες των στοιχείων λίστας.
Μπορείτε να προσαρμόσετε το ψευδο-στοιχείο ::marker ανάλογα με τις ανάγκες σας. Μπορείτε να αλλάξετε το χρώμα, τη γραμματοσειρά, το μέγεθος ή άλλες ιδιότητες του δείκτη των στοιχείων λίστας.
Η χρήση του ::marker pseudo-στοιχείου σας επιτρέπει να προσαρμόσετε την εμφάνιση των δεικτών των στοιχείων λίστας και να τους προσθέσετε στυλ σύμφωνα με τις προτιμήσεις σας.
[adinserter block=”4″]
CSS – Το ψευδο-στοιχείο ::selection
Το ψευδο-στοιχείο ::selection ταιριάζει με το τμήμα ενός στοιχείου που έχει επιλεγεί από έναν χρήστη.
Οι παρακάτω ιδιότητες CSS μπορούν να εφαρμοστούν στο ::selection: color (χρώμα), background (φόντο), cursor (δρομέας), και outline (περίγραμμα).
Το παρακάτω παράδειγμα καθιστά το επιλεγμένο κείμενο κόκκινο σε ένα κίτρινο φόντο:
::selection {
color: red;
background: yellow;
}
Σε αυτό το παράδειγμα, χρησιμοποιούμε τη δήλωση ::selection για να επιλέξουμε το επιλεγμένο τμήμα κειμένου. Οι ιδιότητες “color” και “background” ορίζουν το χρώμα του επιλεγμένου κειμένου και του φόντου αντίστοιχα.
Μπορείτε να προσαρμόσετε το ψευδο-στοιχείο ::selection ανάλογα με τις ανάγκες σας. Μπορείτε να αλλάξετε το χρώμα, το φόντο, τον δρομέα ή το περίγραμμα του επιλεγμένου τμήματος ενός στοιχείου.
Η χρήση του ::selection pseudo-στοιχείου σας επιτρέπει να προσαρμόσετε την εμφάνιση του επιλεγμένου κειμένου στην ιστοσελίδα σας, δημιουργώντας ένα εξατομικευμένο στιλ που αντικατοπτρίζει τον σχεδιασμό και το θέμα της σελίδας.