Αυτή η εγγραφή θα σας καθοδηγήσει σχετικά με την αλλαγή περιεχομένου στο CSS.
Πώς να αλλάξετε περιεχόμενο στο CSS;
Για να αλλάξουμε το περιεχόμενο στο CSS, θα χρησιμοποιήσουμε τις παρακάτω μεθόδους:
Ας δούμε κάθε μέθοδο μία προς μία!
Μέθοδος 1: Χρήση ::after Selector με ιδιότητα περιεχομένου για αλλαγή περιεχομένου στο CSS
Ο ' ::μετά ' ο επιλογέας τοποθετεί το καθορισμένο περιεχόμενο μετά το στοιχείο HTML χρησιμοποιώντας το CSS ' περιεχόμενο ” ιδιοκτησία. Αυτή η λειτουργία βοηθά στην προσθήκη του περιεχομένου στο επιλεγμένο στοιχείο. Επιπλέον, το « απεικόνιση Η ιδιότητα μπορεί να χρησιμοποιηθεί για την απόκρυψη του υπάρχοντος περιεχομένου.
Ας ρίξουμε μια ματιά στο παρακάτω παράδειγμα για να κατανοήσουμε πώς να αλλάξετε το περιεχόμενο στο CSS χρησιμοποιώντας τον επιλογέα ::after.
Παράδειγμα
Εδώ είναι η σελίδα μας HTML με το κείμενο ' Καλημέρα!!! '. Ας αντικαταστήσουμε το προστιθέμενο περιεχόμενο:
Επί του παρόντος, έχουμε προσθέσει ένα ' ετικέτα με κείμενο στην ενότητα σώματος του αρχείου HTML μας:
< Π > Καλημέρα!!! < / Π >Στο αρχείο μας CSS, θα χρησιμοποιήσουμε τώρα τον επιλογέα ::after ως ' σώμα::μετά ' και χρησιμοποιήστε το ' περιεχόμενο “ακίνητο με την αξία” Καλό απόγευμα ” μέσα στον ορισμό του. Ως αποτέλεσμα, ο επιλογέας CSS θα τοποθετήσει το κείμενο αμέσως μετά το γραπτό κείμενο. Τέλος, αποκρύψτε το υπάρχον κείμενο χρησιμοποιώντας το ' απεικόνιση ' ιδιοκτησία και ορίστε την τιμή της σε ' κανένας ”:
< στυλ >σώμα::μετά {
περιεχόμενο : 'Καλό απόγευμα' ;
}
Π {
οθόνη: καμία;
}
< / στυλ >
Τώρα, αποθηκεύστε το αρχείο HTML και απλά ανοίξτε το στο πρόγραμμα περιήγησης ή χρησιμοποιήστε το «Ζωντανός διακομιστής » για τον ίδιο σκοπό:
Όπως μπορείτε να δείτε, το περιεχόμενο έχει αλλάξει με επιτυχία χρησιμοποιώντας τον επιλογέα ::after CSS:
Μέθοδος 2: Χρησιμοποιήστε το ::before Selector with content Property για να αλλάξετε το περιεχόμενο στο CSS
Στο CSS, το ' ::πριν Ο επιλογέας χρησιμοποιείται για να κάνει το περιεχόμενο να εμφανίζεται ακριβώς πριν από το υπάρχον περιεχόμενο ενός στοιχείου. Μπορεί να χρησιμοποιηθεί σε συνδυασμό με το « περιεχόμενο ιδιότητα για προσθήκη νέου περιεχομένου στο επιλεγμένο στοιχείο.
Παράδειγμα
Καθορίστε το ::πριν από τον επιλογέα αμέσως μετά το σώμα ως ' σώμα::πριν '. Αυτό θα τοποθετήσει το νέο περιεχόμενο πριν από το υπάρχον περιεχόμενο. Σημειώστε ότι όλες οι άλλες ιδιότητες παραμένουν ίδιες όπως στο προηγούμενο παράδειγμα:
< στυλ >σώμα::πριν {
περιεχόμενο : 'Καλό απόγευμα' ;
}
Π {
οθόνη: καμία;
}
< / στυλ >
Παραγωγή
Έχουμε εξηγήσει διάφορες μεθόδους για την αλλαγή του περιεχομένου στο CSS.
συμπέρασμα
Για να αλλάξετε το περιεχόμενο, ' ::μετά ' και ' ::πριν Οι επιλογείς CSS χρησιμοποιούνται με το περιεχόμενο ” ιδιοκτησία. Στην πρώτη προσέγγιση, το καθορισμένο κείμενο προστίθεται μετά το επιλεγμένο στοιχείο, ενώ ο δεύτερος επιλογέας CSS λειτουργεί το αντίθετο. Επιπλέον, το « απεικόνιση Η ιδιότητα ' μπορεί να χρησιμοποιηθεί για την απόκρυψη του υπάρχοντος περιεχομένου ενός στοιχείου. Αυτός είναι ο τρόπος με τον οποίο το περιεχόμενο αλλάζει εντελώς στο CSS. Καλύψαμε τις δύο μεθόδους αλλαγής του περιεχομένου στο CSS.