עיצוב סמני רשימות עם marker:: ב- CSS

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

בפוסט זה תמצאו את הבסיס לשימוש ב-::marker, את תכונות ה-CSS הנתמכות, ודוגמאות מעשיות שניתן ליישם מיד.

שימוש בסיסי

התחביר הבסיסי לשימוש ב-::marker פשוט. יש להחיל אותו על פריטי רשימה, בין אם מסודרת או לא מסודרת:

ul li::marker {
  /* עיצוב סמני רשימה לא מסודרת */
}

ol li::marker {
  /* עיצוב סמני רשימה מסודרת */
}

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

ניתן לשנות את המראה של הכדורים ברשימה לא מסודרת על ידי הגדרת התכונה content על הסמן:

<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 pseudo 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
Ordered list marker styling by Roee Yossef (@roeey)
on CodePen.

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

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

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

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

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

HTML

ה-markup מגדיר רשימה לא מסודרת פשוטה עם קלאסים של סטטוס:

<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

הסגנונות משתמשים ב-::before כדי ליצור סמני bullet צבעוניים שמשתנים על פי סטטוס המשימה:

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: '•';
    display: inline-block;
    width: 0.7em;
    font-size: 1.5em;
    color: #ddd;
    transition: transform 0.3s, color 0.3s;
}

li.completed::before {
    color: #4CAF50;
}

li.in-progress::before {
    color: #FFC107;
}

li span {
    flex-grow: 1;
}

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

JavaScript

לחיצה על פריט מחליפה את הסטטוס בין completed ל-in-progress:

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
Advanced marker task list by Roee Yossef (@roeey)
on CodePen.

כאשר ::marker אינו תומך בעיצוב שאתם צריכים (כמו רקעים, טרנספורמציות או תכונות layout), השימוש ב-::before יחד עם list-style: none הוא פתרון נפוץ – כפי שמודגם בדוגמה המתקדמת.

ה-pseudo-element ::marker אינו הדרך היחידה להתאים אישית את מראה הרשימות. אם אתם מעוניינים בעיצוב אלמנטי טקסט נוספים, עיינו בפוסט על ה-pseudo-element ::first-letter לעיצוב האות הראשונה בפסקאות. לטכניקות סלקטורים מתקדמות יותר, קראו את הפוסט על סלקטורים של CSS4.

שאלות נפוצות

שאלות נפוצות בנושא ה-pseudo-element ::marker ב-CSS:

סיכום

ה-pseudo-element ::marker מספק דרך פשוטה ומבוססת CSS בלבד לעיצוב סמני רשימות. עבור שינויים בסיסיים כמו צבע, גודל גופן ותוכן מותאם, הוא עובד היטב עם מינימום קוד. כאשר נדרש עיצוב מתקדם יותר כמו רקעים, טרנספורמציות או שליטה ב-layout, ניתן לשלב את ::before עם list-style: none כפתרון חלופי.