Skip to content Skip to sidebar Skip to footer
Home / Css / Html

CSS-styled Paragraphs With Paragraph Numbering And Sidenotes

Post a Comment
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 numb

Solution 1:

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>

Post a Comment for "CSS-styled Paragraphs With Paragraph Numbering And Sidenotes"