בCSS ישנם מס' אלמנטים פיקטיביים, שבעצם לא באמת קיימים, הם אינם חלק מהHTML, אך בCSS ניתן לתפוס אותם ולתת להם הגדרות סטייל שונות. בפוסט הזה נדבר על שתי האלמנטים before & after.
האם כל אלמנט HTMLי יכול לקבל before/after?
התשובה היא לא. כל אלמנט של HTML שכולל תגית פתיחה ותגית סגירה – מסוגל לקבל before וafter. לדוגמא: div, a, button, p, header, form וכו'.
אלמנטים שכוללים תגית אחת בלבד – שבסופה בד"כ מגיע סלאש הסגירה – לא מסוגלים לקבל before או after. לדוגמא: input, img, br. וכן האלמנט select לא עובד טוב עם before או after.
עוד קצת מידע…
האלמנט before יתווסף לנו בתחילת אלמנט האב, לפני כל התוכן שלו, והאלמנט after יתווסף לסוף האלמנט האב, אחרי כל התוכן שלו. יש לזכור ששתיהם נוספים לתוך האלמנט האב שלהם שעליו הם מוגדרים, ולא כמו שנשמע מהשם שלהם – לפניו או אחריו, אלא לפני או אחרי התוכן שבתוך האלמנט האב.
מאחר ומדובר באלמנטים פיקטיביים, שלא באמת קיימים בHTML, נכון לעכשיו סקריפטים אינם מסוגלים לשלוט עליהם. כלומר, לא ניתן לכתוב משהו כמו jQuery('button:after').click(), כי הafter לא מוכר לJS.
לbefore/after חייב להיות מאפיין CSS שנקרא content. תכף נדבר מה האפשרויות הקיימות, רק חשוב לציין שבלי המאפיין הזה – לא נוכל לראות את האלמנט הפיקטיבי שלנו, לערוך אותו וכו'. הוא פשוט לא יהיה קיים ורק המאפיין של content נותן לו חיים. המאפיין content מכיל את התוכן של הbefore/after, אם זה טקסט או תמונה. למשל אם נצהיר משהו כמו content: 'hello' – הbefore שלנו יכיל את הטקסט הזה. כמה שאני יודעת – קוראי מסך לא מסוגלים לקרוא את זה, כי זה לא טקסט אמיתי של HTML, אלא כמו כל האלמנט – זה פיקטיבי. בנוסף לא ניתן לתפוס את זה עם העכבר, וכו'.
סוגי הcontent האפשריים:
- ריק – ". משמש כשאנחנו צריכים רק להשתמש בbefore/after לצורך עיצובי כלשהו, בלי להכניס להם תוכן.
- טקסט – יכול להיות מילה ממש, ויכול להיות רק תו כלשהו, כמו התו | כדי להפריד בין רכיבים, התו " כדי לתת עיצוב לקטע ציטוט, או תו שמסמל אייקון בפונט של אייקונים כמו font awesome או glyphicons. לדוגמא "\f024". במקרה הזה נצטרך כמובן להוסיף לbefore או הafter שלנו מאפיינים נוספים כמו
font-familyוכו'. - attr(attribute) – ניתן לשתול לתוך הbefore טקסט שקיים כattribute של האלמנט האב שלו. למשל לשתול שם את הID של האב או כל מאפיין אחר של האב.
- counter – ארחיב עליו בפוסט נפרד בעז"ה. באופן כללי – מדובר באפשרות לייצר מונה, אם בספרות או באותיות, שמאתחלים פעם אחת ומקדמים כל הזמן. והכל בCSS בלבד. את התוכן של המונה – הספרה או האות הנוכחית – יש להכניס לbefore או after כדי להציג אותו.
- url(url) – ניתן להכניס לbefore/after מדיה כמו תמונה, אודיו, וידאו וכדו. כותבים url ואז בסוגריים את הURL של אותה מדיה. יש לשים לב שבמידה ומכניסים שם תמונה – לא ניתן להגדיר לה גודל, אלא היא מוצגת בגודל המקורי שלה בלבד. (אם מצאתם דרך לעשות את זה – אשמח מאד להתעדכן. בשביל זה יש כאן אפשרות לתגובה…)
דוגמאות לשימושים אפשריים באלמנטים before & after
האפשרויות לשימוש בbefore/after אינן מוגבלות. ניתן כאן כמה דוגמאות נפוצות:
אייקונים
אייקונים רבים שמגיעים כפונט עובדים עם הגדרת content לאלמנט before או after. הכי מוכרים לדעתי הם fontAwesome, אך יש גם את gliphicons, או icomoon, שכולם עובדים כך שמגדירים לbefore הגדרת font-family ייעודי, וכן נותנים content נפרד לכל אייקון מתוך הסט. הנה דוגמה שתוכלו לבדוק עם הdeveloper tools כדי לראות איך זה נכתב:
עיצוב לצ'קבוקס וכפתורי רדיו
כתבתי כאן פוסט על כפתורי רדיו וצ'קבוקס מעוצבים. מעצבים את הbefore של הlable, וכך ניתן לתת להם כל עיצוב שרוצים, בלי מגבלות של תמיכת דפדפנים.
מעברי עכבר מגניבים
כאשר משתמשים בbefore + after האפשרויות למעברי עכבר לכפתורים/קישורים/כותרות וכו' הם מעבר לכל דמיון.
אפשר לראות כאן דוגמאות רבות למעברי עכבר לכפתורים.
סימון לפריטים עם דרופדאון בתפריט
כאשר יש בתפריט li שיש לו גם תת תפריט (דרופדאון) – בדרך כלל יש לו קלאס כלשהו שמסמן שיש לו תת תפריט. במקרה כזה נוכל להוסיף לli את הafter עם סימון משולש או חץ או כל דבר אחר, שמסמן שיש לו תת תפריט.
עיצוב רשימה ul/ol
כשרוצים רשימה ממוספרת (ol) או לא ממוספרת (ul), והסימון בצד צריך להיות בעיצוב שונה מהעיצוב של הטקסט עצמו – אפשר להשתמש פשוט בbefore של li, שהוא מעוצב. אם מדובר בol – רשימה ממוספרת – אפשר להשתמש בcounter כדי להשיג מספרים עולים. כך מומש לדוגמה ברשימות באתר אלקטרה סחר:
טולטיפ
כפי שאפשר לראות במדריך המלא ליצירת טולטיפים.
יצא לי לראות שימוש נחמד לזה בלינקים, שהיו חייבים להיות נגישים, ומצד שני רצו שהtooltip שמופיע מעל הקישור כשעומדים עליו יהיה מעוצב ויפה. לכן במקום להגדיר title לקישור (לצורך נגישות, שקורא המסך יוכל לקרוא מה השם של הלינק), שגם יוצר טולטיפ אפור מעל הקישור במעכבר עכבר – הגדירו aria-label – שזו הגדרה שרק קורא המסך מכיר, בדיוק כמו title, אבל בלי טולטיפ, וכדי להוסיף את הטופלטיפ המעוצב, לאנשים שמסוגלים לצפות באתר – הוסיפו before עם content: attr(aria-label); בתוספת רקע חביב וכו'. תוכלו לראות פירוט לגבי אופן המימוש בפוסט שעוסק ביצירת טולטיפים.
ועוד ועוד שימושים שונים.
עשיתם משהו מגניב עם before או after? גיליתם אפשרות מעניינת שלא נמצאת כאן בפוסט? עובד או לא עובד לכם? אשמח לשמוע. בהצלחה רבה!