מספר מילים על ה pseudo-element בשם ::marker

::marker הוא תכונה ב- CSS המאפשרת לעצב את הסימנים של פריטי רשימה (list-items). בין אם ברצונכם להתאים את המראה של כדורים ברשימה לא מסודרת (ul) או את המספור ברשימה מסודרת (ol), השימוש ב ::marker מעניק לכם את הגמישות לשפר את הנראות או לעצב את הרשימות בכל אופן שרק שתרצו.

שימוש בסיסי

התחביר הבסיסי לשימוש ב-::marker נראה כך:

ul li::marker {
/* Your styling properties here */
}

ol li::marker {
/* Your styling properties here */
}

דוגמה 1: שינוי העיצוב (״הנקודות״) של רשימה לא מסודרת

נניח שברצונכם לשנות את המראה של הכדורים ברשימה לא מסודרת. תוכלו לעשות זאת באופן הבא:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

ul {
  list-style: none;
  font-size: 1.2rem;
  font-family: 'Noto Sans Hebrew', sans-serif;
}
li {
  padding-left: 7px;
}
li::marker {
  content: "🔹";
  color: blue;
}

בדוגמה זו התוכן של הסמן מוגדר כאימוג'י (יהלום כחול) באמצעות התכונה content, והצבע מוגדר לכחול. הנה כיצד זה נראה:

See the Pen
The Use of ::marker psuedo element by Roee Yossef (@roeey)
on CodePen.

דוגמה 2: עיצוב מספרים ברשימה מסודרת

נניח שברצונכם להפוך את המספרים ברשימה מסודרת לעבים ואדומים:

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

li::marker {
    font-weight: bold;
    color: red;
}

הנה התוצאה:

See the Pen
Untitled by Roee Yossef (@roeey)
on CodePen.

דוגמה 3: דוגמה מתקדמת לשימוש ב- ::marker

בדוגמה זו נבנה רשימת משימות דינמית עם סמנים מותאמים אישית לייצוג מצב ההתקדמות של כל משימה.

פריטי הרשימה המעוצבים באמצעות הסלקטור li מוצגים כ flex containers וזאת כדי ליישר את הסמן והטקסט של המשימה. ה-::before משמש ליצירת bullet point מעוצבת עבור כל פריט ברשימה.

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

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

HTML:

<ul>
    <li class="completed"><span>Task 1: Completed</span></li>
    <li class="in-progress"><span>Task 2: In Progress</span></li>
    <li><span>Task 3: Incomplete</span></li>
</ul>

CSS:

ul {
    list-style: none;
    padding: 0;
    font-family: 'Noto Sans Hebrew', sans-serif;
    font-size: 1.2rem;
}

li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

li::before {
    content: '•'; /* Bullet character */
    display: inline-block;
    width: 0.7em;
    font-size: 1.5em;
    color: #ddd;
    transition: transform 0.3s, color 0.3s;
}

li.completed::before {
    color: #4CAF50; /* Green color for completed tasks */
}

li.in-progress::before {
    color: #FFC107; /* Yellow color for in-progress tasks */
}

li span {
    flex-grow: 1;
}

li:hover::before {
    transform: scale(1.2);
}

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  const taskItems = document.querySelectorAll('li');

  taskItems.forEach(function(item) {
    item.addEventListener('click', function() {
      this.classList.toggle('completed');
      this.classList.toggle('in-progress');
    });
  });
});

התוצאה:

See the Pen
Untitled by Roee Yossef (@roeey)
on CodePen.

אתם מוזמנים כמובן להשתמש גם בתכונות כמו font-family, background-color (ועוד) כדי להשיג את המראה הרצוי עבור סמני פריטי הרשימה שלכם.

לסיכום, ה-::marker  מספק דרך נוחה ופשוטה לשפר ב CSS את עיצוב הרשימות ולהפוך אלו לאטרקטיביות יותר ויזואלית…