CSS Dynamic Content

Using counters

body { counter-reset: section; }
h3::before {
  counter-increment: section; 
  content: "Section." counter(section);
}
ol {
  counter-reset: section;   
  list-marker-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, ".") " "; 
}

Counter

/\* Set "my-counter" to 0 \*/
counter-set: my-counter;
/\* Increment "my-counter" by 1 \*/
counter-increment: my-counter;
/\* Decrement "my-counter" by 1 \*/
counter-increment: my-counter -1;
/\* Reset "my-counter" to 0 \*/
counter-reset: my-counter;

See also: Counter set

Variable

Define CSS Variable

:root {
  --first-color: #16f;
  --second-color: #ff7;
}

Variable Usage

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

See also: CSS Variable

Comments