Menu
I'm wanting to put a text on the web with paragraph numbers and sidenotes. I'm using Huckleberry Finn as a test: see http://jsfiddle.net/29Mdt/.
I'd like to have the paragraph numbers in the margin on the left, and the sidenotes in the margin on the right. This is extremely easily done with tables in HTML, but I'm trying to do it with CSS, and I'm a beginner to CSS. An earlier question about paragraph numbers can be found here, but I did not find the responses at all helpful.
Thanks in advance for any help.
425
One approach:
.chapter {
counter-reset: paragraph;
padding-left: 20px;
}
.page p {
width: 400px;
}
.page p:before {
position: absolute;
margin-left: -20px;
color: #CCC;
content: counter(paragraph);
counter-increment: paragraph;
}
.sidenote {
position: absolute;
margin-left: 420px;
font-size: 14px;
color: #E22;
width: 100px;
}
HTML:
<body class="chapter">
<div class="page">
<h1>Tom Sawyer</h1>
<p>You don't know about me...</p>
<!-- sidenote to the paragraph following the aside tag -->
<aside class="sidenote">The widow she cried over me...</aside>
<p>Now the way that the...</p>
</div>
</body>
answered Sep 02 '25 08:09
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