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

Δείτε πώς μπορείτε να χρησιμοποιήσετε ψευδο-στοιχεία στο CSS.

Κοινά ψευδο-στοιχεία

Υπάρχει μια εκτεταμένη λίστα ψευδο-στοιχείων που είναι διαθέσιμα για να διευκολύνουν τη ζωή ενός προγραμματιστή ιστού. Μερικά από αυτά τα ψευδο-στοιχεία περιλαμβάνουν:

• Πριν
• Μετά
• Σκηνικό
• Πρώτη γραμμή
• Πρώτο γράμμα

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

Παράδειγμα δομής ψευδο-στοιχείων

επιλογέας:: ψευδο-στοιχείο {
/ * κωδικός css * /
} 

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

Τα ψευδο-στοιχεία πριν και μετά είναι τα πιο δημοφιλή στη λίστα και δεδομένου ότι υπάρχουν πολλοί πρακτικοί τρόποι χρήσης τους - δεν είναι δύσκολο να καταλάβουμε γιατί.

Χρήση του στοιχείου Before Pseudo στο CSS

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

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

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

Ένας από τους λίγους αποτελεσματικούς τρόπους για την επίλυση αυτού του προβλήματος είναι η χρήση του ψευδο-στοιχείου πριν.

Χρήση του παραδείγματος Πριν από ψευδο-στοιχείο

.σελίδα προορισμού{
/ * Τακτοποιεί το κείμενο στην επικάλυψη εικόνας * /
οθόνη: flex;
flex-direction: στήλη;
justify-content: κέντρο;
Στοιχεία ευθυγράμμισης: κέντρο;
text-align: center;
/ * ορίζει τη σελίδα για προσαρμογή σε διαφορετικά μεγέθη οθόνης * /
ύψος: 100vh;
}
.landingPage:: πριν {
περιεχόμενο:'';
/ * εισάγει μια εικόνα * /
φόντο: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
κέντρο / κάλυμμα χωρίς επανάληψη.
/ * τοποθετεί μια επικάλυψη στην κορυφή της εικόνας * /
αδιαφάνεια: 0,4;
/ * κάνει την εικόνα ορατή * /
θέση: απόλυτη;
κορυφή: 0;
αριστερά: 0;
πλάτος: 100%;
ύψος: 100%;
}

Ο παραπάνω κώδικας δημιουργήθηκε για να χρησιμοποιείται από κοινού με την παρακάτω κλάση HTML landingPage. Όπως φαίνεται στον παραπάνω κώδικα, χρησιμοποιώντας το προηγούμενο ψευδο-στοιχείο μπορούμε να στοχεύσουμε την εικόνα και να χρησιμοποιήσουμε την ιδιότητα αδιαφάνειας σε αυτήν πριν συνδυαστεί η εικόνα με το κείμενο.

Χρήση του στοιχείου Before pseudo


Αυτό είναι το αποτέλεσμα της χρήσης του ψευδο-στοιχείου πριν
για επικάλυψη και εικόνα με αναγνώσιμο κείμενο.

Αυτό θα έχει ως αποτέλεσμα την τοποθέτηση μιας επικάλυψης στην εικόνα και την εμφάνιση καθαρού κειμένου στην κορυφή, όπως φαίνεται στην παρακάτω εικόνα:

Χρήση του στοιχείου After Pseudo στο CSS

Μια πρακτική χρήση για το μετά ψευδο-στοιχείο είναι να βοηθήσει στη δημιουργία μιας φόρμας HTML. Οι περισσότερες φόρμες δημιουργούνται με ένα σύνολο πεδίων που απαιτούν τη σωστή υποβολή δεδομένων για τη φόρμα.

Ένας τρόπος για να δείξετε ότι ένα πεδίο σε μια φόρμα απαιτεί δεδομένα είναι τοποθετώντας έναν αστερίσκο μετά την ετικέτα για αυτό το πεδίο. Το μετά ψευδο-στοιχείο παρέχει έναν πρακτικό τρόπο για να το κάνετε αυτό.

Χρήση του παραδείγματος After Pseudo-element

.required:: μετά τις {
περιεχόμενο: '*';
χρώμα: κόκκινο;
} 

Η εισαγωγή του παραπάνω κωδικού στην ενότητα CSS της φόρμας σας θα διασφαλίσει ότι κάθε ετικέτα που περιέχει την απαιτούμενη κλάση θα ακολουθείται άμεσα από έναν κόκκινο αστερίσκο. Το μετά ψευδο-στοιχείο είναι επίσης πρακτικό σε αυτό το παράδειγμα, επειδή βοηθά στον διαχωρισμό του στυλ από τη δομή (η οποία είναι πάντα ιδανική στην ανάπτυξη λογισμικού.)

Η ιδιότητα περιεχομένου

Όπως φαίνεται στο παραπάνω παράδειγμα ψευδο-στοιχείου, η ιδιότητα περιεχομένου είναι το εργαλείο που χρησιμοποιείται για την εισαγωγή νέου περιεχομένου σε μια ιστοσελίδα. Αυτή η ιδιότητα χρησιμοποιείται μόνο με ψευδο-στοιχεία πριν και μετά.

Είναι σημαντικό να σημειωθεί ότι ακόμη και αν δεν υπάρχει διαθέσιμο περιεχόμενο για τροφοδοσία στην ιδιότητα περιεχομένου (όπως στο προηγούμενο παράδειγμα ψευδο-στοιχείου παραπάνω), εξακολουθείτε να απαιτείται να χρησιμοποιήσετε την ιδιότητα περιεχομένου μέσα στις παραμέτρους του ψευδο-στοιχείου πριν ή μετά για να τα κάνετε να λειτουργούν ως προορίζεται.

Τώρα μπορείτε να χρησιμοποιήσετε Ψευδο-στοιχεία στο CSS

Σε αυτό το άρθρο, μάθατε πώς να αναγνωρίζετε και να χρησιμοποιείτε ψευδο-στοιχεία στα προγράμματα CSS σας. Σας παρουσιάστηκαν τα ψευδο-στοιχεία πριν και μετά και σας δόθηκαν πρακτικοί τρόποι χρήσης και των δύο. Καταφέρατε επίσης να δείτε γιατί η ιδιότητα περιεχομένου είναι απαραίτητη για την επιτυχή χρήση των ψευδο-στοιχείων πριν και μετά.

10 απλά παραδείγματα κώδικα CSS που μπορείτε να μάθετε σε 10 λεπτά

Θέλετε να μάθετε περισσότερα σχετικά με τη χρήση CSS; Δοκιμάστε αυτά τα βασικά παραδείγματα κώδικα CSS και, στη συνέχεια, εφαρμόστε τα στις δικές σας ιστοσελίδες.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα