3

How can I create hanging section numbers with CSS? In other words,

  • heading text should be left-aligned at the same horizontal position as the text but
  • section numbers section numbers should be "hanging" in the left column.

Probably the best example to illustrate this is browser's rendering of numbered lists:

  1. Heading 1

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  2. Heading 2

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Is there any sane way to do this in CSS with numbers before heading tags (for all levels)?

Simple example HTML to modify:

<html>
<body>

<h1>First h1 heading</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<h2>First h2 heading</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

</body>
</html>
randy
  • 1,031
  • 10
  • 20
Nikolai Prokoschenko
  • 8,465
  • 11
  • 58
  • 97

3 Answers3

3

I've got this done. Essentially, every counter has to be floated to the left:

h1:before {
    content: counter(chapter) ". ";
    float:left;
    width: 1.2cm;
}

and every heading has to get a margin and a left attribute:

h1 {    
    left: 1.2cm;
    margin-left: -1.2cm;
}
Nikolai Prokoschenko
  • 8,465
  • 11
  • 58
  • 97
0

Try this:

h1, h2, h3 {
  text-align: left;
  margin-left: -10px;
}
Zack Marrapese
  • 12,072
  • 9
  • 51
  • 69
0

h1 { margin-left: -10px; } will work until your header goes to two lines.

How about this:

h1 { text-indent: -10px }

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43