CSS Listeleme Tasarımı

Started by orhan, Feb 02, 2019, 09:09 pm

Previous topic - Next topic

orhan

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

Code Select
<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

Code Select
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