Ψευδο-Στοιχεία CSS - Επεξήγηση επιλογών πριν και μετά

Πριν από τον επιλογέα

Ο ::beforeεπιλογέας CSS μπορεί να χρησιμοποιηθεί για την εισαγωγή περιεχομένου πριν από το περιεχόμενο του επιλεγμένου στοιχείου ή στοιχείων. Χρησιμοποιείται με την προσάρτηση ::beforeστο στοιχείο στο οποίο θα χρησιμοποιηθεί.

Ας δούμε μερικά παραδείγματα:

p::before { content: "* "; } span.comment::before { content: "Comment: "; color: blue; }

To infinity, and beyond!

I am Buzz Lightyear. I come in peace.

May the force be with you.

Do. Or do not. There is no try.

Στο παραπάνω παράδειγμα προετοιμάζουμε έναν αστερίσκο και ένα κενό διάστημα πριν από κάθε στοιχείο παραγράφου στη σελίδα. Επίσης, προετοιμάζουμε το "Σχόλιο:" με μπλε χρώμα πριν από κάθε spanστοιχείο στην τάξη comment.

Μετά τον επιλογέα

Ο ::afterεπιλογέας CSS μπορεί να χρησιμοποιηθεί για την εισαγωγή περιεχομένου μετά το περιεχόμενο του επιλεγμένου στοιχείου ή στοιχείων. Χρησιμοποιείται με την προσάρτηση ::afterστο στοιχείο στο οποίο θα χρησιμοποιηθεί.

Ορίστε μερικά παραδείγματα:

.buzz::after { content: " - Buzz Lightyear"; color: blue; } .yoda::after { content: " - Yoda"; color: green; }

To infinity, and beyond!

Do. Or do not. There is no try.

Στο παραπάνω παράδειγμα, προσθέτουμε "- Buzz Lightyear" με μπλε χρώμα στο στοιχείο με την τάξη buzz. Επίσης, προσθέτουμε "- Yoda" με πράσινο χρώμα στο στοιχείο με την τάξη yoda.

Μονο-άνω και κάτω τελεία

Υπάρχει λίγη συζήτηση σχετικά με τον σωστό τρόπο χρήσης ψευδο-στοιχείων - το παλιό στυλ μονόκλωνο ( :before), που χρησιμοποιείται στις προδιαγραφές CSS 1 και 2, σε σχέση με τη σύσταση CSS3, διπλό άνω και κάτω τελεία ( ::before), κυρίως για «καθιέρωση διακρίσεων μεταξύ ψευδο-τάξεις και ψευδο-στοιχεία » .

Ωστόσο, για λόγους συμβατότητας, η μέθοδος ενός κόλον είναι ακόμη αποδεκτή. Λάβετε υπόψη ότι το IE8 υποστηρίζει μόνο τη σημείωση με ένα κόλον.

Περισσότερες πληροφορίες:

  • Το Εγχειρίδιο CSS: ένας εύχρηστος οδηγός για το CSS για προγραμματιστές
  • Τα καλύτερα παραδείγματα CSS και CSS3