5 שימושים מועילים בתכונה content  של CSS ובפסאודו אלמנטים before ו-after

הפסאודו אלמנטים :before ו-:after מאפשרים להוסיף תוכן לדף באמצעות CSS בדומה לאלמנטים של HTML, והם מסייעים לנו להפוך את דפי האינטרנט לדינמיים יותר.

במדריך זה 5 דוגמאות לשימוש בפסאודו אלמנטים של CSS.

1. הוספת כוכבית לשדות חובה בטופס

מאוד מקובל להוסיף כוכבית קטנה ליד שדות הכרחיים (required) בטופס.

את הכוכבית אנחנו יכולים להוסיף בתור פסאודו אלמנט של CSS.

בדוגמה הבאה הוספנו את הכוכבית האדומה לצד התגית באמצעות CSS בלבד:

ה-HTML כולל שדה בטופס ותגית label עטופים בתוך div שיש לו קלאס required:

<div class="input-wrapper required">
  <label>
  שדה חובה
  </label> 
  <input required="" type="text" value="" />
</div>

ברמת ה-CSS, נוסיף את הפסאודו אלמנט after לתגית label כי אנחנו רוצים שהאלמנט יבוא אחרי התגית:

.required label:after{

}

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

.required label:after{
  content: '*';
}

נוסיף כללי עיצוב המקנים לאלמנט רווח וצבע אדום:

.required label:after{
  content: '*';
  color: red;
  padding-left:10px;
}

הוספנו את הפסאודו אלמנט לתגית label ולא לשדה input מכיוון שניתן להשתמש רק על אלמנטים של HTML הכוללים תגית פותחת וסוגרת דוגמת div בעוד input מורכב מתגית אחת בלבד.

2. טולטיפ ללא JavaScript

טולטיפ היא תיבת טקסט קטנה שמופיעה כשמרחפים hover על אלמנט. נהוג להשתמש ב-JavaScript כדי להפעיל טולטיפים. אבל גם פסאודו אלמנט של CSS יכול לספק את הסחורה.

אם תעבור עם העכבר על סימן השאלה תוכל לראות את הטולטיפ בפעולה:

לתוך מבנה ה-HTML שהשתמשנו בו בסעיף קודם נוסיף עכשיו span עם קלאס tooltip שיכלול תכונה של data-tooltip עם הטקסט שנרצה שיופיע כשמשתמש יעבור עם העכבר.

<div class="input-wrapper required">
  <label>
  שדה חובה  
  </label>
  <input required="" type="text" value="" /> 
  <span class="tooltip" data-tooltip="הטולטיפ שלנו גדול וירוק"> ? </span>
</div>

נרצה שהפסיאודו האלמנט יופיע במיקום אבסולוטי ועל כן נגדיר את ה-div העוטף כבעל מיקום יחסי כדי שנוכל למקם את האלמנט יחסית ל-div.

.input-wrapper{
  position:relative;
  width:300px;
  height:40px;
}

כדי שהטולטיפ יופיע רק כשעוברים עם העכבר, נשתמש ב-hover:

.tooltip:hover:after{
  content: attr(data-tooltip);
  position:absolute;
  top: 0;
  left: 0;
  padding: 10px;
  background-color:green;
  color:white;
}

התכונה content מקבלת את ערכה מהפונקציה attr(). הפרמטר שמעבירים לפונקציה הוא שם ה-attribute על גבי אלמנט ה-HTML.

3. הוספת טקסט

אנחנו יכולים להוסיף טקסט שמקורו ב-CSS. כל מה שצריך הוא לרשום את הטקסט בתור הערך של התכונה content:

.element:after {
  content: 'Some text'
}

4. הוספת גליפים או תמונות

אנחנו יכולים להוסיף גליפים (glyphs) לפני או אחרי אלמנט.

נשתמש בזה כדי שהבולטים של הרשימה שלנו יהיו בצורת תלתן:

• ראשון
• שני
• שלישי

זה הקוד שהשיג את התוצאה:

ul {
  list-style-type:none;
}

ul li:before {
  content: "♣";
  display: inline-block;
  width: 16px;
  font-size: 18px;
  text-align: right;
  color:red;
}

לרשימת הגליפים בהם ניתן להשתמש: glyphs page

כפי שניתן להוסיף גליפים ניתן להוסיף תמונות רק כדאי לקחת בחשבון שהתמונות יוצגו בגודל המקורי:

ul{
  list-style-type:none;
}

.li:before {
  content: url('path-to-img.png');
}

5. בתור clearfix

כשרוצים לנקות את ה-float אפשר להשתמש בפסאודו אלמנט :after על האלמנט ההורה:

<div class="parent">
  <div class="child-with-float"></div>
  <div class="child-with-float"></div>
  <div class="child-with-float"></div>
</div>

.parent:after {
  content: "";
  display: table;
  clear: both;
}

יותר פשוט ונקי מאשר div שעושה clearfix.

לכל מדריכי ה-CSS3

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים