CSS לפני ו- CSS אחרי - כיצד להשתמש במאפיין התוכן

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(): מגדיר את התוכן כערך a counter, בדרך כלל מספר.

חוּט

אחת הדוגמאות הבסיסיות ביותר תהיה השימוש בהוספת תוכן מחרוזת לפני או אחרי אלמנט. בדוגמה זו נוסיף סמל קישור לפני קישור ונוסיף את כתובת האתר של הקישור אחריו.

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 שלנו כדי להעביר את הערך לטיפ הכלים שלנו. עבור המצביע של tooltip, אנו קובעים את contentאל "", כמו contentנדרש כדי להבהיר ::beforeאו ::afterאלמנט פסאודו.

מונים

counter()פונקצית CSS מחזירה מחרוזת המייצגת את הערך הנוכחי של הדלפק בשם. בדוגמה הבאה יש לנו רשימה מסודרת שנוסיף תוכן באמצעות a 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.

מחוץ לאלמנטים פסאודו

זה נכון! אתה יכול להשתמש contentבמאפיין מחוץ לאלמנטים פסאודו ::beforeו ::after. אמנם, השימוש בו מוגבל ואינו תואם לחלוטין בכל הדפדפנים.

מקרה השימוש התואם ביותר יהיה החלפת אלמנט.

 codeSTACKr 

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

הערה: החלפה אינה נתמכת ב- IE.

סיכום

רוב הפעמים תראה content: ""נמצא ::beforeו ::after-אלמנטים פסבדו. אך contentלנכס יש יישומים שימושיים רבים.

השימוש הטוב ביותר לדעתי הוא להשתמש בו לעדכון אלמנטים בתפזורת. אם ברצונך להוסיף סמל לפני כל קישור באתר שלך, יהיה הרבה יותר קל להוסיף אותו דרך contentהנכס מאשר להוסיף אותו לכל רכיב במסמך ה- HTML.

תודה שקראת!

תודה שקראתם מאמר זה. אני מקווה שזה עזר לך להבין טוב יותר איך contentהנכס עובד ב- CSS.

אני ג'סי מטקסס. בדוק את התוכן האחר שלי והודיע ​​לי כיצד אוכל לעזור לך במסעך להיות מפתח אתרים.

• הירשם ל- YouTube שלי
• תגיד שלום! אינסטגרם | טוויטר
• הירשם לניוזלטר שלי