:: πριν / :: μετά - CSS-Κόλπα

Το στοιχείο ::beforeκαι τα ::afterψευδο-στοιχεία στο CSS σάς επιτρέπουν να εισάγετε περιεχόμενο σε μια σελίδα χωρίς να χρειάζεται να βρίσκεται στο HTML. Ενώ το τελικό αποτέλεσμα δεν βρίσκεται στην πραγματικότητα στο DOM, εμφανίζεται στη σελίδα σαν να είναι, και ουσιαστικά θα ήταν έτσι:

div::before ( content: "before"; ) div::after ( content: "after"; )

 before after

Οι μόνοι λόγοι για να χρησιμοποιήσετε το ένα πάνω στο άλλο είναι:

Θέλετε το δημιουργημένο περιεχόμενο να προηγείται του περιεχομένου του στοιχείου, σε θέση.
Το ::afterπεριεχόμενο είναι επίσης «μετά» στη σειρά προέλευσης, οπότε θα τοποθετηθεί πάνω από :: πριν αν στοιβάζεται το ένα πάνω στο άλλο φυσικά.

Λάβετε υπόψη ότι το περιεχόμενο βρίσκεται ακόμα μέσα στο στοιχείο στο οποίο εφαρμόζονται. Το όνομα των αισθήσεων φαίνεται να έρχονται, ξέρετε, πριν ή μετά το στοιχείο, αλλά είναι πραγματικά πριν ή μετά το άλλο περιεχόμενο μέσα.

Η τιμή για το περιεχόμενο μπορεί να είναι:

Μια συμβολοσειρά: content: "a string"; - οι ειδικοί χαρακτήρες πρέπει να κωδικοποιούνται ειδικά ως οντότητα unicode. Δείτε τη σελίδα των γλύφων.
Μια εικόνα: content: url (/path/to/image.jpg.webp); - Η εικόνα εισάγεται στις ακριβείς διαστάσεις της και δεν μπορεί να αλλάξει το μέγεθός της. Δεδομένου ότι πράγματα όπως οι κλίσεις είναι στην πραγματικότητα εικόνες, ένα ψευδο στοιχείο μπορεί να είναι μια κλίση.
Τίποτα: περιεχόμενο: ""; - Χρήσιμο για την επιδιόρθωση και την εισαγωγή εικόνων ως εικόνων φόντου (ρυθμίστε το πλάτος και το ύψος και μπορεί ακόμη και να αλλάξει το μέγεθος με το μέγεθος φόντου).
Ένας μετρητής: content: counter(li); - Πραγματικά χρήσιμος για το στυλ λίστες έως ότου: έρθει ο δείκτης.

Σημειώστε ότι δεν μπορείτε να εισαγάγετε HTML (τουλάχιστον, αυτό θα αποδοθεί ως HTML). content: "";

: vs ::

Κάθε πρόγραμμα περιήγησης που υποστηρίζει τη σύνταξη διπλής άνω και κάτω τελείας (: :) CSS3 υποστηρίζει επίσης μόνο τη σύνταξη (:), αλλά το IE 8 υποστηρίζει μόνο το ενιαίο άνω και κάτω τελείωμα, οπότε προς το παρόν, συνιστάται να χρησιμοποιείτε απλώς το άνω-άνω τελεία για καλύτερη υποστήριξη προγράμματος περιήγησης.

:: είναι η νεότερη μορφή που προορίζεται να διακρίνει ψευδο περιεχόμενο από ψευδο-επιλογείς. Εάν δεν χρειάζεστε υποστήριξη IE 8, μη διστάσετε να χρησιμοποιήσετε το διπλό κόλον.

Σχετιζομαι με

::πρώτη γραμμή
::πρώτο γράμμα
Pseudo Class Selectors

Υποστήριξη προγράμματος περιήγησης

Μικρά θέματα:

Ο Firefox 3.5- δεν θα επέτρεπε την απόλυτη τοποθέτηση ψευδο στοιχείων.
Στο Opera 9.2, ο κενός χώρος εμφανίζεται πάντα σε αυτό το ψευδο-στοιχείο σαν να είναι preκείμενο.
Το IE 8 δεν υποστηρίζει ευρετήριο z σε αυτά