کدهای CSS برای استایل‌دهی به لیست‌های بولت‌دار و ساخت Custom Bullets

مثال کد:

/* HTML */
<ul class="my-list-type">
    <li>آیتم اول</li>
    <li>آیتم دوم</li>
    <li>آیتم سوم</li>
</ul>

/* CSS */
.my-list-type {
    list-style-type: square; /* بولت‌ها رو مربع می‌کنیم */
    color: #34495e;
    font-family: 'Vazirmatn', sans-serif;
}

ol.roman-numbers {
    list-style-type: upper-roman; /* لیست شماره‌دار با اعداد رومی */
    color: #2c3e50;
}
        

مثال کد:

/* HTML */
<ul class="list-inside">
    <li>این یک آیتم طولانی است که می‌بینیم چگونه بولت آن در موقعیت inside رفتار می‌کند و متن از زیر آن شروع می‌شود.</li>
    <li>آیتم بعدی</li>
</ul>

/* CSS */
.list-inside {
    list-style-position: inside; /* بولت داخل متن قرار می‌گیرد */
    color: #34495e;
}
        

مثال کد:

/* HTML */
<ul class="short-list">
    <li>اولین ویژگی</li>
    <li>دومین ویژگی</li>
</ul>

/* CSS */
.short-list {
    list-style: square inside; /* مربع و داخل */
    color: #34495e;
}

/* یا با عکس */
.image-list {
    list-style: url('path/to/my-bullet.png') inside;
    color: #2c3e50;
}
        

مثال کد `::marker`:

/* HTML */
<ul class="custom-marker-list">
    <li>آیتم با بولت سفارشی</li>
    <li>دومین آیتم</li>
</ul>

<ol class="custom-marker-ol">
    <li>مرحله اول</li>
    <li>مرحله دوم</li>
</ol>

/* CSS */
.custom-marker-list li::marker {
    content: "✔️ "; /* از ایموجی یا هر کاراکتر دیگه استفاده کن */
    color: #28a745; /* رنگ بولت رو سبز کن */
    font-size: 1.2em; /* کمی بزرگترش کن */
    font-weight: bold;
}

.custom-marker-ol li::marker {
    content: counter(list-item) ". "; /* شماره‌گذاری پیش‌فرض رو تغییر نده */
    color: #007bff;
    font-size: 1.1em;
    font-family: 'monospace';
}
        

نحوه پیاده‌سازی `::before`:

1. ابتدا بولت پیش‌فرض لیست رو با list-style: none; حذف کن.
2. به آیتم‌های لیست (<li>) position: relative; بده.
3. به <li>::before مقدار position: absolute; و content: "چیزی که می‌خوای بولت باشه"; بده.
4. با `top`، `left` (یا `right` برای RTL) و `transform` بولت رو دقیقاً سر جاش تنظیم کن.
5. برای تراز کردن متن، به <li> یه padding-left (یا `padding-right`) کافی بده.

مثال کد `::before`:

/* HTML */
<ul class="custom-before-list">
    <li>طراحی واکنش‌گرا</li>
    <li>بهینه‌سازی سئو</li>
    <li>سرعت بارگذاری بالا</li>
</ul>

/* CSS */
.custom-before-list {
    list-style: none; /* بولت پیش‌فرض رو حذف می‌کنیم */
    padding: 0;
    margin: 0;
}

.custom-before-list li {
    position: relative; /* برای position absolute بولت */
    padding-right: 25px; /* فاصله برای بولت */
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #34495e;
}

.custom-before-list li::before {
    content: "⭐"; /* ستاره زرد به عنوان بولت */
    position: absolute;
    right: 0; /* برای زبان فارسی، از راست تنظیم می‌کنیم */
    top: 50%; /* وسط عمودی آیتم */
    transform: translateY(-50%); /* برای تراز دقیق */
    font-size: 1.2em;
    color: #ffc107; /* رنگ ستاره */
}

/* لینک‌سازی هوشمند: می‌تونی از آیکون‌ها و اسنیپت‌های آماده استفاده کنی! */
/* مثلاً برای آیکون‌های CSS یا HTML می‌تونی از این صفحات کمک بگیری: */
/* https://fa-tools.ir/snippets/css/ */
/* https://fa-tools.ir/snippets/html/ */
        

📊 مقایسه `::marker` و `::before`

نتیجه‌گیری: `::marker` برای کارهای سریع و ساده و `::before` برای کنترل کامل و خلاقیت بیشتر عالیه!

مثال کد:

/* HTML */
<ul class="image-bullet-list">
    <li>محصول شماره یک</li>
    <li>محصول شماره دو</li>
</ul>

/* CSS */
.image-bullet-list {
    list-style-image: url('path/to/check-icon.png'); /* آدرس تصویر بولت */
    list-style-position: inside; /* (اختیاری) */
    color: #34495e;
}
        

مثال کد `::before` با تصویر پس‌زمینه:

/* HTML */
<ul class="custom-image-bullet">
    <li>ویژگی ۱: عملکرد بالا</li>
    <li>ویژگی ۲: امنیت قوی</li>
    <li>ویژگی ۳: رابط کاربری آسان</li>
</ul>

/* CSS */
.custom-image-bullet {
    list-style: none; /* بولت پیش‌فرض رو حذف می‌کنیم */
    padding: 0;
    margin: 0;
}

.custom-image-bullet li {
    position: relative;
    padding-right: 30px; /* فضای کافی برای بولت تصویر */
    margin-bottom: 10px;
    line-height: 1.5;
    font-size: 1.1em;
    color: #34495e;
}

.custom-image-bullet li::before {
    content: ""; /* محتوای خالی برای استفاده از background-image */
    position: absolute;
    right: 0; /* موقعیت بولت برای زبان فارسی */
    top: 50%;
    transform: translateY(-50%);
    width: 20px; /* عرض تصویر بولت */
    height: 20px; /* ارتفاع تصویر بولت */
    background-image: url('path/to/custom-arrow.svg'); /* آدرس تصویر SVG یا PNG */
    background-size: contain; /* تصویر رو به اندازه المنت فیت کن */
    background-repeat: no-repeat; /* تکرار نکردن تصویر */
    background-position: center; /* وسط قرار دادن تصویر */
}
        

نکته دوستانه: برای آیکون‌ها، استفاده از SVG به جای PNG یا JPG خیلی بهتره! SVGها مقیاس‌پذیرن (Scalable) و توی هر سایزی کیفیتشون رو از دست نمی‌دن. می‌تونی کلی اسنیپت جاوا اسکریپت هم برای مدیریت داینامیک SVGها پیدا کنی.

مثال کد لیست‌های تو در تو:

/* HTML */
<ul class="main-menu">
    <li>صفحه اصلی</li>
    <li>خدمات ما
        <ul>
            <li>طراحی وب</li>
            <li>توسعه موبایل</li>
        </ul>
    </li>
    <li>درباره ما</li>
</ul>

/* CSS */
.main-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-menu > li { /* فقط آیتم‌های سطح اول */
    position: relative;
    padding-right: 25px;
    margin-bottom: 15px;
    font-weight: bold;
    color: #2c3e50;
}

.main-menu > li::before {
    content: "➡️"; /* فلش برای آیتم‌های اصلی */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #e67e22;
    font-size: 1.1em;
}

.main-menu li ul { /* لیست‌های داخلی */
    list-style: none;
    padding: 0;
    margin-right: 20px; /* تورفتگی برای لیست داخلی */
    margin-top: 10px;
}

.main-menu li ul li { /* آیتم‌های لیست داخلی */
    position: relative;
    padding-right: 20px;
    margin-bottom: 8px;
    font-weight: normal;
    color: #34495e;
}

.main-menu li ul li::before {
    content: "✅"; /* تیک برای آیتم‌های داخلی */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #27ae60;
    font-size: 0.9em;
}

/* می‌تونی برای سطح‌های بیشتر هم همین الگو رو ادامه بدی */
/* .main-menu li ul li ul li::before { ... } */
        

نکته: استفاده از انتخابگر فرزند مستقیم (>) مثل .main-menu > li بهت کمک می‌کنه استایلت فقط به آیتم‌های همون سطح اعمال بشه و روی لیست‌های داخلی تأثیر نذاره. این یک استراتژی هوشمندانه برای مدیریت قالب‌های وردپرس پیچیده هم هست.

مثال کد ریسپانسیو:

/* HTML (همون لیست‌های قبلی) */
<ul class="responsive-list">
    <li>محتوای قابل تنظیم برای موبایل</li>
    <li>محتوای قابل تنظیم برای تبلت و لپتاپ</li>
    <li>نمایش عالی در تلویزیون</li>
</ul>

/* CSS پایه برای همه دستگاه‌ها */
.responsive-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.responsive-list li {
    position: relative;
    padding-right: 25px;
    margin-bottom: 15px;
    font-size: 1.1rem; /* استفاده از rem */
    line-height: 1.6;
    color: #34495e;
}

.responsive-list li::before {
    content: "➡️";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em; /* استفاده از em */
    color: #3498db;
}

/* Media Query برای موبایل (صفحات کوچکتر از 768px) */
@media (max-width: 768px) {
    .responsive-list li {
        font-size: 1rem; /* فونت کمی کوچکتر در موبایل */
        padding-right: 20px; /* فاصله کمتر برای بولت */
    }

    .responsive-list li::before {
        content: "👉"; /* تغییر بولت برای موبایل */
        font-size: 0.9em;
    }
}

/* Media Query برای تبلت و لپتاپ (بین 769px و 1200px) */
@media (min-width: 769px) and (max-width: 1200px) {
    .responsive-list li {
        font-size: 1.1rem;
        padding-right: 30px;
    }

    .responsive-list li::before {
        content: "➡️";
        font-size: 1.1em;
    }
}

/* Media Query برای تلویزیون و صفحات خیلی بزرگ (بزرگتر از 1920px) */
@media (min-width: 1921px) {
    .responsive-list li {
        font-size: 1.4rem; /* فونت بزرگتر برای تلویزیون */
        padding-right: 40px;
        margin-bottom: 20px;
    }

    .responsive-list li::before {
        content: "✨"; /* بولت خاص برای صفحات بزرگ */
        font-size: 1.5em;
        color: #f1c40f;
    }
}
        

نکته مهم: برای پیاده‌سازی صحیح واکنش‌گرایی، همیشه از تگ <meta name="viewport" content="width=device-width, initial-scale=1.0"> در بخش <head> صفحه HTML خودت استفاده کن. این تگ به مرورگر میگه که چطور صفحه رو روی دستگاه‌های مختلف نمایش بده. می‌تونی اسنیپت‌های مفید بیشتری رو در این زمینه پیدا کنی تا کارهات رو راحت‌تر کنی.

توی هر پروژه‌ای، ممکنه به مشکلاتی بربخوری. توی استایل‌دهی لیست‌ها هم داستان همینه. بیا چندتا از مشکلات رایج و راه‌حل‌هاشون رو با هم بررسی کنیم تا اگه گیر کردی، بدونی چی کار کنی:

بولت‌ها غیب می‌شن!

مشکل: لیستت بولت نداره، حتی اگه از `::marker` استفاده کردی یا فکر می‌کردی بولت پیش‌فرض باید باشه.

• راه‌حل ۱ (معمولی): مطمئن شو که list-style: none; یا list-style-type: none; رو به اشتباه به لیستت اعمال نکردی و بعد یادت رفته بولت جایگزین بذاری.
• راه‌حل ۲ (پدینگ و مارجین): شاید padding-left یا margin-left (یا `right` برای RTL) لیستت رو صفر کردی و بولت‌ها از صفحه رفتن بیرون! یه مقدار پدینگ یا مارجین مناسب به <ul> یا <ol> بده.
• راه‌حل ۳ (خطای تایپی): یه `گلت املایی` تو کد ::marker یا ::before باعث میشه کار نکنه. همیشه کدهات رو دقیق بررسی کن.

بولت‌ها جابجا می‌شن یا تراز نیستن!

مشکل: بولت‌ها نسبت به متن آیتم لیست، بالا یا پایین‌ترن، یا کلاً سر جاشون نیستن.

• راه‌حل (برای `::before`): اگه از ::before استفاده می‌کنی، حتماً position: relative; رو به <li> و position: absolute; رو به ::before اعمال کن. بعد با استفاده از top: 50%; و transform: translateY(-50%); تراز عمودی رو دقیق کن. برای تراز افقی هم right: 0; یا left: 0; رو با یه padding روی <li> تنظیم کن.
• راه‌حل (برای `::marker`): برای ::marker کنترل کمتری داری. اگه مشکل تراز عمودی داری، گاهی تنظیم line-height روی <li> یا خود ::marker می‌تونه کمک کنه.

تصاویر بولت‌ها خوب نمایش داده نمی‌شن!

مشکل: تصویری که به عنوان بولت گذاشتی، خیلی بزرگه، کوچیکه، یا بریده شده.

• راه‌حل (برای `list-style-image`): این ویژگی کنترل محدودی داره. بهترین کار اینه که خود تصویرت رو توی نرم‌افزارهای گرافیکی (مثل فتوشاپ یا ایلوستریتور) به اندازه دقیق مورد نظرت دربیاری.
• راه‌حل (برای `::before` با `background-image`): اینجا دستت بازه! با width و height سایز بولت رو تنظیم کن. از background-size: contain; یا background-size: cover; برای مقیاس‌دهی تصویر داخل بولت استفاده کن. background-repeat: no-repeat; و background-position: center; هم برای نمایش صحیح تصویر خیلی مهمن.

`::marker` کار نمی‌کنه!

مشکل: از ::marker استفاده کردی ولی هیچ استایلی اعمال نمی‌شه.

• راه‌حل: همه ویژگی‌های CSS روی ::marker کار نمی‌کنن. فقط ویژگی‌های مرتبط با فونت (مثل font-size, color, font-weight)، content و چند مورد دیگه رو پشتیبانی می‌کنه. اگه خواستی کارهای پیچیده‌تر کنی، برو سراغ ::before. همچنین مطمئن شو که مرورگرت از ::marker به خوبی پشتیبانی می‌کنه (اکثر مرورگرهای مدرن پشتیبانی می‌کنن).

اینجا به چندتا سوال رایج در مورد استایل‌دهی لیست‌ها جواب می‌دیم:

خب رفیق، رسیدیم به آخر داستان! امیدوارم این مقاله برات مفید بوده باشه و تونسته باشی با خیال راحت، هر نوع لیست بولت‌داری رو که دلت می‌خواد، با CSS بسازی و به سایت‌هات جون تازه‌ای بدی. یادت باشه، خلاقیت توی کدنویسی حرف اول رو می‌زنه. پس نترس و هرچیزی رو که یاد گرفتی، امتحان کن و باهاش بازی کن تا بهترین نتیجه رو بگیری. اگه سوالی داشتی یا به مشکل خوردی، یا حتی اگه اسنیپت‌های خفن خودت رو داری، حتماً باهامون در ارتباط باش. همیشه به دنبال یادگیری و پیشرفت باش!

برای ارتباط مستقیم و مشاوره، می‌تونی با ما تماس بگیری:
09202232789