HTML文書でhタグに自動連番見出しを振る方法

HTML, CSS, JavaScript 
body
{
    counter-reset: chapter;
    counter-reset: section;
    counter-reset: detail;
}

h1
{
    counter-reset: chapter;
}

h2
{
    counter-reset: section;
}

h3
{
    counter-reset: detail;
}

h2:before
{
    content: counter(chapter) ". ";
    counter-increment: chapter;
}

h3:before
{
    content: counter(chapter) "." counter(section) ". ";
    counter-increment: section;
}

h4:before
{
    content: counter(chapter) "." counter(section) "." counter(detail) ". ";
    counter-increment: detail;
}