CSS-styled paragraphs with paragraph numbering and sidenotes
I'm wanting to put a text on the web with paragraph numbers 开发者_Python百科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.
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>
加载中,请稍侯......
精彩评论