Menu
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:
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.
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>
901
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With