CSS Listeleme Tasarımı

[orhan]

Merhaba bu gün css nin listeleme tasarimini anlatayim
örnek şoyle bır tabela yazdık

<ol>
  <li>Lorem, ipsum dolor.</li>
  <li>Alias, repellendus praesentium.</li>
  <li>Asperiores, voluptatem perspiciatis.</li>
  <li>Animi, placeat laudantium.</li>
</ol>

şimdı buna sorgu oluşturmadan harfleri 1 den 4 kadar sıralayalım

css dosyamıza şu kodları yazalım

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
ol li {
  counter-increment: my-awesome-counter;
}
ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: red;
  font-weight: bold;
}



body {
  font-family: Montserrat, sans-serif;
}

sonuç

1.Lorem, ipsum dolor.
2.Alias, repellendus praesentium.
3.Asperiores, voluptatem perspiciatis.
4.Animi, placeat laudantium.

DEMO