Self Numbering HTML Headings HOME

CSS can automatically add paragraph numbers to the <h1> <h2> <h3> <h4> heading elements!

Here is the CSS code which automatically numbers all headings in this example:
<style>
   body{counter-reset:h1counter}
   h1{counter-reset:h2counter h3counter h4counter}
   h2{counter-reset:h3counter h4counter}
   h3{counter-reset:h4counter}
   h1:before{content:"\02768"counter(h1counter)"\02769\0000a0";counter-increment:h1counter;}
   h2:before{content:"\02768"counter(h1counter)"."counter(h2counter)"\02769\0000a0";counter-increment:h2counter}
   h3:before{content:"\02768"counter(h1counter)"."counter(h2counter)"."counter(h3counter)"\02769\0000a0";counter-increment:h3counter}
   h4:before{content:"\02768"counter(h1counter)"."counter(h2counter)"."counter(h3counter)"."counter(h4counter)"\02769\0000a0";counter-increment:h4counter}
   h0{margin-block-start:0.67em;margin-block-end:0;font-size:2.00em;font-weight:bold;display:inline-block;vertical-align:middle}
   h1{margin-block-start:0.67em;margin-block-end:0;line-height:1;font-size:2.00em;font-weight:bold;display:inline-block;vertical-align:baseline}
   h2{margin-block-start:0.83em;margin-block-end:0;line-height:1;font-size:1.50em;font-weight:bold;display:inline-block;vertical-align:baseline}
   h3{margin-block-start:1.00em;margin-block-end:0;line-height:1;font-size:1.17em;font-weight:bold;display:inline-block;vertical-align:baseline}
   h4{margin-block-start:1.33em;margin-block-end:0;line-height:1;font-size:1.00em;font-weight:bold;display:inline-block;vertical-align:baseline}
</style>
Bonus! If you skip a heading level then it will correctly insert 0 as a place holder.
Actual Example

Plants

can be divided
into several convenient categories.

Useful

plants have value
because they fulfill a human desire.

Delicious

flavors permeate
certain plants such as favorite spices.

Sweet

tasting foliage should
be checked for toxicity before eating.

Sour

grapes can be fixed
by adding large amounts of sugar.

Medicinal

plants can be
eaten to prolong life or alter mood.

Weak

 medicinal plants may
not be safe to eat in large quantities.

Strong

medicinal plants are
safe to avoid if you are not an expert.

Useless

plants get in
your way or become a fire hazard.

Weeds

are plants nobody
wants. The come from the Devil.

Fast growing

weeds can
be especially challenging to tame.

Slow growing

fungus is a
type of weed which attacks boards.

Miscellaneous

types are
useless because they are generic.

Named

plants might be
interesting but maybe not useful.

Unnamed

plants have no
name because they are useless.

Animals

Blablabla
Bleebleebleee Bloobloobloo Pop!

Pets

Blablabla
Bleebleebleee Bloobloobloo Pop!

Edible

Blablabla
Bleebleebleee Bloobloobloo Pop!

...ad nauseum
         
This is the html source code:
<h0>Actual Example</h0><br>

<h1>Plants</h1> can be divided<br>
into several convenient categories.<br>

<h2>Useful</h2> plants have value<br>
because they fulfill a human desire.<br>

<h3>Delicious</h3> flavors permeate<br> 
certain plants such as favorite spices.<br>

<h4>Sweet</h4> tasting foliage should<br>
be checked for toxicity before eating.<br>

<h4>Sour</h4> grapes can be fixed<br>
by adding large amounts of sugar.<br>

<h3>Medicinal</h3> plants can be<br>
eaten to prolong life or alter mood.<br>

<h4>Weak</h4> &nbsp;medicinal plants may<br>
not be safe to eat in large quantities.<br>

<h4>Strong</h4> medicinal plants are<br>
safe to avoid if you are not an expert.<br>

<h2>Useless</h2> plants get in<br>
your way or become a fire hazard.<br>

<h3>Weeds</h3> are plants nobody<br>
wants. The come from the Devil.<br>

<h4>Fast growing</h4> weeds can<br>
be especially challenging to tame.<br>

<h4>Slow growing</h4> fungus is a<br>
type of weed which attacks boards.<br>

<h3>Miscellaneous</h3> types are<br>
useless because they are generic.<br>

<h4>Named</h4> plants might be<br>
interesting but maybe not useful.<br>

<h4>Unnamed</h4> plants have no<br>
name because they are useless.<br>

<h1>Animals</h1> Blablabla<br>
Bleebleebleee Bloobloobloo Pop!<br>

<h2>Pets</h2> Blablabla<br>
Bleebleebleee Bloobloobloo Pop!<br>

<h2>Edible</h2> Blablabla<br>
Bleebleebleee Bloobloobloo Pop!<br>

<br><strong>...ad nauseum</strong><br>

Safety, accuracy and completeness of information provided herein is not guaranteed,
so be inspired by it but do not use it as a basis for experimentation or other actions.

Clickable link!  TOP  ©™
 HOME 
Valid HTML & CSS!
Congrenation.com 2024-12-07T21:52:24.728Z
Version 20231217