inline-list-marker.html (1561B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>CSS Test: inline list-item with ::marker</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <link rel="help" href="https://drafts.csswg.org/css-lists-3/#marker-pseudo"> 11 <link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"> 12 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1105868"> 13 <link rel="match" href="inline-list-marker-ref.html"> 14 <style> 15 html,body { 16 color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; 17 } 18 ol,ul,li { margin:0; padding:0; } 19 body { margin-left: 40px; } 20 21 li { display: inline list-item; border: 1px solid; } 22 li::marker { content: counters(list-item, ".") " "; } 23 .wrap { width: 22ch; } 24 </style> 25 </head> 26 <body> 27 28 <div class="wrap"> 29 <li>A A A A A A A A A A A A A A A A A A A A </li> 30 <li>B</li> 31 32 <ol> 33 <li>A A A A A A A A A A A A A A A A A A A A </li> 34 <li>B</li> 35 <li>C</li> 36 </ol> 37 38 <ol style="display:inline"> 39 <li>A A A A A A A A A A A A A A A A A A A A </li> 40 <li>B</li> 41 <li>C</li> 42 </ol> 43 44 <ol style="display:inline"> 45 <li>A A A A A A A A A A A A A A A A A A A A </li> 46 <li>B<ol> 47 <li>a a a a a a a a a a a a a a a a a a a a </li> 48 <li>b</li> 49 </ol></li> 50 <li>C</li> 51 </ol> 52 53 <ul> 54 <li>A A A A A A A A A A A A A A A A A A A A </li> 55 <li>B<ol style="display:inline"> 56 <li>a a a a a a a a a a a a a a a a a a a a </li> 57 <li>b</li> 58 </ol></li> 59 <li>C</li> 60 </ul> 61 </div> 62 63 </body>