CODEWITHSUNDEEP
csshtml-heading
Nikolai Prokoschenko
Nikolai Prokoschenko

Reputation: 8765

HTML/CSS: Hanging section numbers to the left of left-aligned heading text

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

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>

Upvotes: 4

Views: 1217

Answers (3)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

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

How about this:

h1 { text-indent: -10px }

Upvotes: 0

Nikolai Prokoschenko
Nikolai Prokoschenko

Reputation: 8765

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;
}

Upvotes: 4

Zack Marrapese
Zack Marrapese

Reputation: 12091

Try this:

h1, h2, h3 {
  text-align: left;
  margin-left: -10px;
}

Upvotes: 0

Related Questions