counter – licznik

counter pozwala na automatyczną numerację wybranych elementów bez konieczności tworzenia z nich listy numerowanej.

 

resetowanie licznika by zacząć od wartości 0 przypisujemy elementowi nadrzędnemu poprzez counter-reset i dowolnie nadaną nazwę

body{
 counter-reset:section;
}

 

określenie wielkości wzrostu wartości licznika poprzez counter-increment, bez podania wartości licznik zwiększa się o 1, przy podaniu wartości licznik wzrasta o podaną wartość

h3::before{
 counter-increment:section 2;
}

 

dodanie licznika do kodu strony wraz z tekstem przed lub po nim za pomocą content

do stylizacji wartości licznika można wykorzystać wartości list-style-type umieszczonej po nazwie licznika przy wywołaniu content

  • lower-roman – cyfry rzymskie małe
  • upper-roman – cyfry rzymskie duże
  • decimal – cyfry arabskie
  • decimal-leading-zero – cyfry arabskie rozpoczęte od 0
  • lower-alpha – małe litery
  • upper-alpha – duże litery
  • lower-latin – małe litery
  • upper-latin – duże litery
  • lower-greek – małe greckie litery
  • armenian – litery ormiańskie
  • georgian – cyfry gruzińskie
h3::before{
 counter-increment:section 2;
 content:"Section" counter(section, georgian) ": ";
}


ol {
  list-style: none; counter-reset: li;
  li {
    counter-increment: li;
  }
  li::before {
    content: counter(li) ".";
    color: $color_accent1;
    font-weight: bold;
    display: inline-block;
    width: 20px;
    margin-left: -20px;
  }
}

–

#css3