כתיבה זו תדריך אותך לגבי שינוי תוכן ב-CSS.
כיצד לשנות תוכן ב-CSS?
כדי לשנות את התוכן ב-CSS, נשתמש בשיטות הבאות:
בואו נעבור על כל שיטה אחת אחת!
שיטה 1: השתמש ב-:after Selector עם מאפיין תוכן כדי לשנות תוכן ב-CSS
ה ' ::לאחר ' הבורר ממקם את התוכן שצוין אחרי רכיב ה-HTML באמצעות ה-CSS ' תוֹכֶן ' תכונה. פעולה זו מסייעת בהוספת התוכן לאלמנט הנבחר. בנוסף, ה' לְהַצִיג ניתן להשתמש בנכס כדי להסתיר את התוכן הקיים.
בואו נסתכל על הדוגמה שלהלן כדי להבין כיצד לשנות את התוכן ב-CSS באמצעות הבורר ::אחרי.
דוגמא
הנה דף ה-HTML שלנו עם הטקסט ' בוקר טוב!!! '. בואו נחליף את התוכן שנוסף:
נכון לעכשיו, הוספנו ' ' תג עם טקסט בחלק הגוף של קובץ ה-HTML שלנו:
< ע > בוקר טוב!!! < / ע >בקובץ ה-CSS שלנו, נשתמש כעת בבורר ::after בתור ' body::אחרי ' והשתמש ב-' תוֹכֶן 'נכס עם הערך' ערב טוב ' בתוך ההגדרה שלו. כתוצאה מכך, בורר ה-CSS ימקם את הטקסט מיד אחרי הטקסט הכתוב. לבסוף, הסתר את הטקסט הקיים באמצעות ' לְהַצִיג ' מאפיין והגדר את הערך שלו ל' אף אחד ”:
< סִגְנוֹן >body::אחרי {
תוֹכֶן : 'ערב טוב' ;
}
ע {
אל תציג דבר;
}
< / סִגְנוֹן >
כעת, שמור את קובץ ה-HTML שלך ופתח אותו בפשטות בדפדפן או השתמש בו 'שרת חי ' לאותה מטרה:
כפי שאתה יכול לראות, התוכן השתנה בהצלחה באמצעות בורר ה-::after CSS:
שיטה 2: השתמש ב-::before Selector עם מאפיין תוכן כדי לשנות את התוכן ב-CSS
ב-CSS, ה' ::לפני בורר משמש כדי לגרום לתוכן להופיע ממש לפני התוכן הקיים של אלמנט. ניתן להשתמש בו בשילוב עם ' תוֹכֶן ' מאפיין כדי להוסיף תוכן חדש לרכיב הנבחר.
דוגמא
ציין את הבורר ::before מיד אחרי הגוף בתור ' body::לפני '. פעולה זו תמקם את התוכן החדש לפני התוכן הקיים. שימו לב שכל שאר המאפיינים נשארים זהים כמו בדוגמה הקודמת:
< סִגְנוֹן >body::לפני {
תוֹכֶן : 'ערב טוב' ;
}
ע {
אל תציג דבר;
}
< / סִגְנוֹן >
תְפוּקָה
הסברנו שיטות שונות לשינוי התוכן ב-CSS.
סיכום
כדי לשנות את התוכן, ' ::לאחר ' ו' ::לפני ' בוררי CSS משמשים עם ' תוֹכֶן ' תכונה. בגישה הראשונה, הטקסט שצוין מתווסף אחרי האלמנט שנבחר, בעוד שבורר ה-CSS השני פועל הפוך. יתר על כן, ה' לְהַצִיג ניתן להשתמש במאפיין כדי להסתיר את התוכן הקיים של אלמנט. כך התוכן משתנה לחלוטין ב-CSS. כיסינו את שתי השיטות לשינוי התוכן ב-CSS.