vignesh vignesh - 5 months ago 14
CSS Question

How do I achieve automatic numbering for headings using css

Could you please help me out to represent my 'Heading Title' and 'Subheading Title' with automatic numbering using css. As i need to have headings only with h1,h2 and not with ol,ul,li...

Here is my code:

<style>
h1,h2 { display: list-item; list-style-position: inside; }
</style>


<div id="page">
<h1>Heading Title</h1>
<h2>Subheading Title</h2>
<h2>Subheading Title</h2>
<h1>Heading Title</h1>
<h2>Subheading Title</h2>
<h1>Heading Title</h1>
</div>


Thanks in advance

Answer

Could you please try this it will help you.

#page {
	counter-reset: heading;
}
h1:before {
	content: counter(heading)") ";
	counter-increment: heading;
}
h1 {
	counter-reset: subheading;
}
h2:before {
	content: counter(heading)"." counter(subheading)") ";
	counter-increment: subheading;
}
<div id="page">
  <h1>Heading Title</h1>
  <h2>Subheading Title</h2>
  <h2>Subheading Title</h2>
  <h1>Heading Title</h1>
  <h2>Subheading Title</h2>
  <h1>Heading Title</h1>
</div>

Comments