شخصی سازی list-style-type

مقدمه

در لیست های ترتیبی نحوه نمایش اعداد لیست و در لیست های غیر ترتیبی نحوه نمایش دایره ها و یا مربع های کوچک کنار هر عنصر لیست در دست ما نیست و ما نقشی در زیبا سازی آن نداریم. در این پست با هم ترفندی برای شخصی سازی ظاهر این موارد را بررسی می کنیم.

یک لیست ترتیبی را به صورت زیر در نظر بگیرید:

<ol>
  <li>گزینه اول</li>
  <li>گزینه دوم</li>
  <li>گزینه سوم</li>
  <li>گزینه چندم؟</li>
</ol>

قدم به قدم مراحل انجام کار را با هم می بینیم. در اولین قدم باید از شر اعدادی که خود عنصر لیست به صورت پیشفرض دارد خلاص شویم برای این کار داریم:

ol
{
  list-style-type: none;
}

حال در قدم دوم باید لیست را به صورت خودکار شماره گذاری کنیم. در CSS شماره گذاری خودکار با استفاده از دو ویژگی counter-reset و counter-increment کنترل می شود.

اگر با شمارنده ها در CSS آشنا نیستید این مطلب را اول بخوانید.

به صورت زیر از این دو ویژگی استفاده می کنیم:

 ol
 {
   counter-reset: my-counter 0;
 }

 ol li
 {
   counter-increment: my-counter 1; 
 }

 ol li::before
 {
   content: counter(my-counter);
 }

حال کافی است با کمک گرفتن از positionها جایگاه درستی به محتوای before در هر عنصر لیست li بدهیم و بقیه کار هم بازی با رنگ ها و اندازه ها می باشد, داریم:

ol
{
 width: 300px;
 margin: 1em auto; 
}

ol li
{ 
 position: relative;
 margin-bottom: .3em;
 padding: .5em 3em .5em 0;
 background-color: #eee;
 color: #1b1b1b;
 font-weight: bold;
}

ol li::before
{ 
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 display: block;
 width: 2.5em;
 text-align: center;
 line-height: 2;
 background-color: #aaa;
 color: #fff;
}

نتیجه کار را باهم ببینم:

See the Pen Customized list style type 1 by Mojtaba Seyedi (@seyedi) on CodePen.

توجه داشته باشید که می توان همین ترفند را برای لیست های غیر ترتیبی استفاده کرد و با استفاده از تابع ()counter استایل علامت های پشت لیست را هم تغییر داد. برای این کار کافی است ol را به ul تبدیل کنیم و در CSS علامت های پشت لیست را برای تابع ()counter تعیین کنیم. به این صورت داریم:

ul li::before
 {
   content: counter(my-counter, square);
}

نکته قابل توجه اینکه این ترفند در IE7 کار نمی کند اگر برای شما این مرورگر اهمیت دارد!