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;
  }
}

–