A demo of paragraph number with CSS's counter-increment
. The demo also includes CSS for handling HTML5 asides.
Last active
December 14, 2015 23:08
-
-
Save trauber/5163440 to your computer and use it in GitHub Desktop.
CSS Paragraph Numbering
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<link rel="stylesheet" type="text/css" href="numberparagraphs.css"/> | |
<title>test</title> | |
</head> | |
<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... Vivamus blandit. | |
Pellentesque eu urna. Vestibulum consequat sem vitae dui. In dictum feugiat | |
quam. Phasellus placerat. In sem nisl, elementum vitae, venenatis nec, lacinia | |
ac, arcu. Pellentesque gravida egestas mi. Integer rutrum tincidunt libero. | |
Duis viverra. Nulla diam lectus, tincidunt et, scelerisque vitae, aliquam | |
vitae, justo. Quisque eget erat. Donec aliquet porta magna. Sed nisl. Ut | |
tellus. Suspendisse quis mi eget dolor sagittis tristique. Aenean non pede eget | |
nisl bibendum gravida. Class aptent taciti sociosqu ad litora torquent per | |
conubia nostra, per inceptos himenaeos. Morbi laoreet. Suspendisse potenti. | |
Donec accumsan porta felis. | |
Fusce tristique leo quis pede. Cras nibh. Sed eget est vitae. | |
</p> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.chapter { | |
counter-reset: paragraph; | |
padding-left: 20px; | |
} | |
.page p { | |
width: 75%; | |
} | |
.page p:before { | |
position: absolute; | |
margin-left: -20px; | |
color: #CCC; | |
content: counter(paragraph); | |
counter-increment: paragraph; | |
} | |
.sidenote { | |
position: absolute; | |
margin-left: 80%; | |
font-size: 14px; | |
color: #E22; | |
width: 100px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment