CSS Before και CSS After - Τρόπος χρήσης της ιδιότητας περιεχομένου

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

Προαπαιτούμενο

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

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

Αποδεκτές τιμές

Αρχικά, ας ρίξουμε μια ματιά σε όλες τις αποδεκτές τιμές της contentιδιοκτησίας.

• normal: Αυτή είναι η προεπιλεγμένη τιμή. Υπολογίζεται noneόταν χρησιμοποιείται με ψευδο-στοιχεία.
• none: Δεν θα δημιουργηθεί ψευδο-στοιχείο.
• : Ρυθμίζει το περιεχόμενο στην καθορισμένη συμβολοσειρά. Αυτή η συμβολοσειρά μπορεί να περιέχει ακολουθίες διαφυγής Unicode. Για παράδειγμα, το σύμβολο πνευματικών δικαιωμάτων: \\000A9.
• : Ρυθμίζει το περιεχόμενο σε μια εικόνα ή μια κλίση χρησιμοποιώντας url()ή linear-gradient().
• open-quote| close-quote: Ρυθμίζει το περιεχόμενο στον κατάλληλο χαρακτήρα προσφοράς που αναφέρεται από την quotesιδιότητα.
• no-open-quote| no-close-quote: Καταργεί μια προσφορά από το επιλεγμένο στοιχείο, αλλά αυξάνει ή μειώνει το επίπεδο ένθεσης που αναφέρεται από την quotesιδιότητα.
• attr(*attribute*): Ορίζει το περιεχόμενο ως την τιμή συμβολοσειράς των επιλεγμένων χαρακτηριστικών επιλεγμένων στοιχείων.
• counter(): Ορίζει το περιεχόμενο ως την τιμή ενός counter, συνήθως ενός αριθμού.

Σειρά

Ένα από τα πιο βασικά παραδείγματα θα ήταν η χρήση της προσθήκης περιεχομένου συμβολοσειράς πριν ή μετά από ένα στοιχείο. Σε αυτό το παράδειγμα, θα προσθέσουμε ένα σύμβολο συνδέσμου πριν από έναν σύνδεσμο και θα προσθέσουμε τη διεύθυνση URL για τον σύνδεσμο μετά από αυτόν.

a::before { content: "\\1F517 "; } a::after { content: " (" attr(href) ")"; } 

Παρατηρήστε το διάστημα μετά τον χαρακτήρα Unicode στο ::beforeψευδο-στοιχείο και πριν από την πρώτη παρένθεση στο ::afterψευδο-στοιχείο. Αυτό θα δημιουργήσει χώρο μεταξύ αυτών και του γονικού στοιχείου.

Εναλλακτικά, θα μπορούσατε να προσθέσετε paddingή marginστα ψευδο-στοιχεία για να προσθέσετε διαχωρισμό.

Βασικά αποσπάσματα

Με την contentιδιότητα, μπορείτε να προσθέσετε εισαγωγικά πριν και / ή μετά από στοιχεία. Τώρα, σε HTML έχουμε την ετικέτα. Αυτό θα προσθέσει επίσης εισαγωγικά γύρω από το περιεχόμενό του. Ωστόσο, με την contentιδιότητα, μπορούμε να έχουμε περισσότερο έλεγχο στην εφαρμογή.

Εδώ είναι το πιο βασικό παράδειγμα προσθήκης εισαγωγικών:

Μπορείτε να το επιτύχετε επίσης χρησιμοποιώντας την ετικέτα HTML . Αλλά ίσως θέλουμε να διαμορφώσουμε το απόσπασμα με διαφορετικό τρόπο. Ας προσθέσουμε λοιπόν μόνο το εισαγωγικό και όχι το τελικό. Και ας διαμορφώσουμε επίσης το εισαγωγικό εισαγωγικό.

p { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba(0, 0, 0, 0.5) } 

Το αποτέλεσμα:

Προηγμένες προσφορές

Μπορούμε επίσης να καθορίσουμε πού δεν θέλουμε εισαγωγικά. Για παράδειγμα, μπορεί να αναφέρετε κάποιον που αναφέρεται σε άλλο άτομο. Έτσι θα έχετε εισαγωγικά μέσα σε εισαγωγικά, τα οποία μπορεί να προκαλέσουν σύγχυση στον αναγνώστη.

Στο CodePen παρακάτω, χρησιμοποιούμε ετικέτες HTML και στη συνέχεια καθορίζουμε ποιες ετικέτες δεν πρέπει να εμφανίζουν τα εισαγωγικά.

Με την πρώτη ματιά, ίσως πιστεύετε ότι πρέπει να καταργήσουμε την ετικέτα όπου χρειάζεται. Αλλά καθορίζοντας πού μια προσφορά δεν πρέπει να συνεχίζει να αυξάνει ή να μειώνει το επίπεδο ένθεσης που αναφέρεται από την quotesιδιοκτησία.

Για να το εξηγήσουμε αυτό, πρέπει να κατανοήσουμε την quotesιδιότητα. Αυτό είναι απλά ένας "πίνακας" χαρακτήρων που πρέπει να χρησιμοποιείται κατά την αναφορά. Εδώ είναι ένα παράδειγμα:

q { quotes: '“' '”' '‘' '’' '“' '”'; } 

Αυτά είναι σύνολα εισαγωγικών. Το πρώτο σετ θα χρησιμοποιηθεί για το ανώτερο επίπεδο των εισαγωγικών. Το δεύτερο σετ θα χρησιμοποιηθεί για την πρώτη ένθετη προσφορά. Και το τρίτο σετ θα χρησιμοποιηθεί για το δεύτερο ένθετο απόσπασμα. Και ούτω καθεξής, εάν υπήρχαν περισσότερα σετ.

Τώρα που κατανοούμε την quotesιδιότητα, μπορώ να εξηγήσω πώς λειτουργούν οι ιδιότητες no-open-quoteκαι no-close-quote.

Για κάθε επίπεδο εισαγωγικών, μπορούμε να αντιστοιχίσουμε διαφορετικά σύνολα χαρακτήρων για χρήση για τα αποσπάσματα. Καθορίζοντας πού μια προσφορά δεν πρέπει να εξακολουθεί να αυξάνει ή να μειώνει το επίπεδο ένθεσης που αναφέρεται από την quotesιδιοκτησία.

Ρίξτε μια ματιά στο παρακάτω παράδειγμα. Θα δείτε ότι το δεύτερο επίπεδο των εισαγωγικών παραλείπεται.

Γνωρίσματα

Τα χαρακτηριστικά μπορούν να χρησιμοποιηθούν για τη μετάδοση περιεχομένου από HTML στην contentιδιότητα CSS . Αυτό το χρησιμοποιήσαμε ήδη στο παράδειγμα συνδέσμου όπου χρησιμοποιήσαμε το hrefχαρακτηριστικό για να συμπεριλάβουμε τη συμβολοσειρά URL ως μέρος του περιεχομένου μας.

Μια τέλεια περίπτωση χρήσης για αυτό είναι μια συμβουλή εργαλείου. Μπορείτε να προσθέσετε ένα titleχαρακτηριστικό σε ένα στοιχείο σε HTML για να έχετε μια απλή, ενσωματωμένη συμβουλή εργαλείου στο δείκτη. Αλλά για να το προσαρμόσουμε, μπορούμε να χρησιμοποιήσουμε ένα χαρακτηριστικό δεδομένων στην ετικέτα HTML και στη συνέχεια να χρησιμοποιήσουμε την contentιδιότητα για να προσθέσουμε μια συμβουλή εργαλείου.

Σε αυτό το παράδειγμα, χρησιμοποιούμε το χαρακτηριστικό data-tooltipαπό το στοιχείο HTML για να μεταφέρουμε την τιμή στην επεξήγηση εργαλείου μας. Για τον δείκτη των επεξήγηση εργαλείου, θέτουμε το contentνα "", όπως contentαπαιτείται για να καταστεί ένα ::beforeή ::afterψευδο-στοιχείου.

Μετρητές

Η counter()συνάρτηση CSS επιστρέφει μια συμβολοσειρά που αντιπροσωπεύει την τρέχουσα τιμή του μετρητή που ονομάζεται. Στο ακόλουθο παράδειγμα έχουμε μια παραγγελία που θα προσθέσουμε περιεχόμενο χρησιμοποιώντας ένα counter.

ol { counter-reset: exampleCounter; } li { counter-increment: exampleCounter; } li::after { content: "[" counter(exampleCounter) "] == [" counter(exampleCounter, upper-roman) "]"; } 

Χωρίς να counterπάμε πολύ σε βάθος στη λειτουργία, πρέπει πρώτα να ξεκινήσουμε τον μετρητή στο olστοιχείο. Μπορούμε να το ονομάσουμε αυτό που θέλουμε. Στη συνέχεια λέμε στον μετρητή να αυξάνεται σε κάθε liστοιχείο. Και τέλος, θέσαμε contentτο li::after.

Εδώ είναι το αποτέλεσμα:

Θα μπορούσατε να το χρησιμοποιήσετε για να προσαρμόσετε περιεχόμενο σε κάθε στοιχείο λίστας που χρειάζεται έναν αντίστοιχο αριθμό. Ή μπορείτε να το χρησιμοποιήσετε για να προσαρμόσετε το ίδιο το στοιχείο λίστας. Για παράδειγμα, μπορείτε να καταργήσετε την προεπιλεγμένη αρίθμηση και να εφαρμόσετε ένα σύστημα αρίθμησης προσαρμοσμένου στυλ.

Εικόνες

Μπορείτε να χρησιμοποιήσετε εικόνες και ντεγκραντέ με την contentιδιοκτησία. Αυτό είναι αρκετά απλό. Εδώ είναι ένα παράδειγμα που χρησιμοποιεί και τα δύο:

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

content: url(//unsplash.it/200/200) / "Alternative Text Here"; 

Σημείωση: Αυτό δεν υποστηρίζεται στους Firefox, IE και Safari. Επίσης, η διαβάθμιση δεν λειτουργεί στον Firefox.

Εκτός Pseudo Elements

Σωστά! Μπορείτε να χρησιμοποιήσετε την contentιδιότητα έξω από τα ψευδο-στοιχεία ::beforeκαι ::after. Αν και, η χρήση του είναι περιορισμένη και δεν είναι πλήρως συμβατή σε όλα τα προγράμματα περιήγησης.

Η πιο συμβατή περίπτωση χρήσης θα ήταν η αντικατάσταση ενός στοιχείου.

 codeSTACKr 

#replace { content: url(""); width: 100%; } 

Σημείωση: Η αντικατάσταση δεν υποστηρίζεται στο IE.

συμπέρασμα

Τις περισσότερες φορές θα δείτε να content: ""βρίσκονται στα ::beforeκαι ::afterψευδο-στοιχεία. Αλλά το contentακίνητο έχει πολλές χρήσιμες εφαρμογές.

Η καλύτερη χρήση κατά τη γνώμη μου είναι να το χρησιμοποιήσω για την ενημέρωση μαζικών στοιχείων. Εάν θέλετε να προσθέσετε ένα εικονίδιο πριν από κάθε σύνδεσμο στον ιστότοπό σας, θα ήταν πολύ πιο εύκολο να το προσθέσετε μέσω της contentιδιότητας παρά να το προσθέσετε σε κάθε στοιχείο του εγγράφου HTML.

Ευχαριστώ για την ανάγνωση!

Ευχαριστούμε που διαβάσατε αυτό το άρθρο. Ας ελπίσουμε ότι σας βοήθησε να κατανοήσετε καλύτερα πώς λειτουργεί το contentακίνητο στο CSS.

Είμαι ο Τζέσι από το Τέξας. Ρίξτε μια ματιά στο άλλο περιεχόμενό μου και ενημερώστε με πώς μπορώ να σας βοηθήσω στο ταξίδι σας για να γίνετε προγραμματιστής ιστού.

• Εγγραφείτε στο YouTube μου
• Πες γεια! Instagram | Κελάδημα
• Εγγραφείτε στο Newsletter μου