Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- OL { counter-reset: item }
- LI { display: block }
- LI:before { content: counters(item, ".") " "; counter-increment: item }
- ol {
- list-style-type: none;
- counter-reset: item;
- margin: 0;
- padding: 0;
- }
- ol > li {
- display: table;
- counter-increment: item;
- margin-bottom: 0.6em;
- }
- ol > li:before {
- content: counters(item, ".") ". ";
- display: table-cell;
- padding-right: 0.6em;
- }
- li ol > li {
- margin: 0;
- }
- li ol > li:before {
- content: counters(item, ".") " ";
- }
- ol {
- counter-reset: item;
- }
- ol li {
- display: block;
- position: relative;
- }
- ol li:before {
- content: counters(item, ".")".";
- counter-increment: item;
- position: absolute;
- margin-right: 100%;
- right: 10px; /* space between number and text */
- }
- /* Numbered lists like 1, 1.1, 2.2.1... */
- ol li {display:block;} /* hide original list counter */
- ol > li:first-child {counter-reset: item;} /* reset counter */
- ol > li {counter-increment: item; position: relative;} /* increment counter */
- ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="author" content="Sandro Alvares - KingRider">
- </head>
- <body>
- <style type="text/css">
- li.title {
- font-size: 20px;
- font-weight: lighter;
- padding: 15px;
- counter-increment: ordem;
- }
- .foo {
- counter-reset: foo;
- padding-left: 15px;
- }
- .foo li {
- list-style-type: none;
- }
- .foo li:before {
- counter-increment: foo;
- content: counter(ordem) "." counter(foo) " ";
- }
- </style>
- <ol>
- <li class="title">TITLE ONE</li>
- <ol class="foo">
- <li>text 1 one</li>
- <li>text 1 two</li>
- <li>text 1 three</li>
- <li>text 1 four</li>
- </ol>
- <li class="title">TITLE TWO</li>
- <ol class="foo">
- <li>text 2 one</li>
- <li>text 2 two</li>
- <li>text 2 three</li>
- <li>text 2 four</li>
- </ol>
- <li class="title">TITLE THREE</li>
- <ol class="foo">
- <li>text 3 one</li>
- <li>text 3 two</li>
- <li>text 3 three</li>
- <li>text 3 four</li>
- </ol>
- </ol>
- </body>
- </html>
- <ol>
- <li>lorem</li>
- <li>lorem ipsum</li>
- </ol>
- <div>
- <ol>
- <li>lorem (should be 1.)</li>
- <li>lorem ipsum ( should be 2.)</li>
- </ol>
- </div>
- ol ul li:before {
- content: no-close-quote;
- counter-increment: none;
- display: list-item;
- margin-right: 100%;
- position: absolute;
- right: 10px;
- }
- ol {
- list-style-type: none;
- counter-reset: item;
- margin: 0;
- padding: 0;
- }
- ol > li {
- display: table;
- counter-increment: item;
- margin-bottom: 0.6em;
- }
- ol > li:before {
- content: counters(item, ".") ") ";
- display: table-cell;
- padding-right: 0.6em;
- }
- li ol > li {
- margin: 0;
- }
- li ol > li:before {
- content: counters(item, ".") ") ";
- }
- <style>
- li.title {
- font-size: 20px;
- counter-increment: ordem;
- color:#0080B0;
- }
- .my_ol_class {
- counter-reset: my_ol_class;
- padding-left: 30px !important;
- }
- .my_ol_class li {
- display: block;
- position: relative;
- }
- .my_ol_class li:before {
- counter-increment: my_ol_class;
- content: counter(ordem) "." counter(my_ol_class) " ";
- position: absolute;
- margin-right: 100%;
- right: 10px; /* space between number and text */
- }
- li.title ol li{
- font-size: 15px;
- color:#5E5E5E;
- }
- </style>
- <ol>
- <li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
- <ol class="my_ol_class">
- <li>
- <p>
- my text 1.
- </p>
- </li>
- <li>
- <p>
- my text 2.
- </p>
- </li>
- </ol>
- </li>
- </ol>
Add Comment
Please, Sign In to add comment