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

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

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.