분류 css

CSS Counter

컨텐츠 정보

  • 조회 717 (작성일 )

본문

HTML :

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item
    <ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    </ul>
  
  </li>
</ul>


CSS : 

li{list-style-type:none;}

ul {
  counter-reset: counter;
}

li::before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}


Result :


1222557700eee188c3b36633c8dfea28_1528939245_8192.png
 



css