📝 CSS List-style (רשימות)

מה זה list-style?

משפחה של מאפיינים ששולטים במראה הסמן (bullet/מספר), מיקום הסמן ביחס לתוכן, ואפשרות להשתמש בתמונה במקום bullet. שלושת המאפיינים העיקריים:

  • list-style-type – סוג הסמן (disc, circle, decimal, lower-roman…)
  • list-style-position – מיקום הסמן: outside (ברירת מחדל) או inside
  • list-style-image – שימוש בתמונה מותאמת במקום bullet
/* קיצור (שורת מאפיינים אחת) */
ul.notes {
  list-style: square inside;
  /* שקול ל- */
  /* list-style-type: square; */
  /* list-style-position: inside; */
}
תצוגה מוגדלת

list-style-type – דוגמאות

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

• disc (ברירת מחדל)

  • Paris
  • Rome
  • Tokyo

○ circle

  • HTML
  • CSS
  • JavaScript

■ square

  • Blue
  • Green
  • Purple

1,2,3… decimal (מספור)

  1. Step One
  2. Step Two
  3. Step Three

i, ii, iii… lower-roman

  1. Intro
  2. Body
  3. Summary

a, b, c… lower-alpha

  1. Option A
  2. Option B
  3. Option C

list-style-position

outside – הסמן נשאר מחוץ לגוש הטקסט; שורות המשך ייכנסו פנימה. inside – הסמן נכנס לתוך התיבה של הפריט.

outside (ברירת מחדל)

  • זהו טקסט ארוך לדוגמה כדי להמחיש איך שורה שנייה משתרשרת כאשר ה-bullet נשאר מחוץ לשורה.
  • עוד פריט קצר.

inside

  • כאן הסמן נכנס לתיבה של הפריט, ולכן השורה השנייה מתחילה בדיוק מתחת לסמן.
  • עוד פריט קצר.

list-style-image – דוגמה עם תמונה

ניתן להחליף bullet בתמונה קטנה (עדיף 24×24‎≈). אם התמונה לא נטענת – הדפדפן יציג את list-style-type כגיבוי.

ul.custom-bullets {
  list-style-image: url("/assets/icons/leaf.png"); /* עדכן נתיב לאייקון שלך */
  list-style-position: outside; /* מומלץ להשאיר outside לרוב המקרים */
}
  • Eco Friendly
  • Recyclable
  • Energy Saving

טיפ: אם צריך שליטה מדויקת יותר על הגודל/יישור – עדיף להשתמש ב-::marker או ב-background-image עם padding מתאים (ראו בהמשך).

::marker מותאם + Counters

הסלקטור ::marker מאפשר לעצב את ה-bullet/מספר: צבע, גודל גופן, ואף להחליף בתו מותאם (כולל אמוג'י). עם CSS Counters אפשר לבנות מספור מותאם אישית.

/* ::marker פשוט עם אמוג׳י */
ul.marker-emoji li::marker { content: "✨ "; font-size: 1.1em; }

/* מספור מותאם עם counters */
ol.fancy-counter { counter-reset: sec; }
ol.fancy-counter > li { counter-increment: sec; }
ol.fancy-counter > li::marker {
  content: counters(sec, ".") ") ";   /* 1) 1.1) 1.1.1) ... */
  color: #22d3ee;                     /* cyan-400 */
  font-weight: 700;
}

::marker עם אמוג'י

  • Install
  • Build
  • Deploy

Counters מרובי־רמות

  1. Setup
    1. Init Project
    2. Configure Lint
  2. Run

Bullet באמצעות רקע (שליטה מלאה בגודל)

כאשר רוצים שליטה מוחלטת על גודל/יישור האייקון – אפשר לבטל bullet רגיל ולהוסיף background-image לפריטים עצמם, יחד עם padding-inline-start.

ul.bg-bullets { list-style: none; padding: 0; margin: 0; }
ul.bg-bullets li {
  background: url("/assets/icons/check.png") no-repeat 0 .35em / 1em 1em;
  padding-inline-start: 1.4em; /* מקום לאייקון */
  margin-block: .25em;
}
  • Responsive
  • Accessible
  • Performant

🔗 קישורים לדוקומנטציה