scroll-marker-010.html (996B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Test: ::scroll-marker with counter-increment</title> 4 <link rel="match" href="scroll-marker-010-ref.html"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-pseudo"> 6 <style> 7 #scroller { 8 width: 600px; 9 height: 300px; 10 overflow: scroll; 11 scroll-marker-group: after; 12 counter-reset: test; 13 } 14 15 #scroller div { 16 width: 600px; 17 height: 300px; 18 margin-bottom: 20px; 19 background: green; 20 } 21 22 #scroller::scroll-marker-group { 23 border: 3px solid black; 24 padding: 5px; 25 height: 60px; 26 display: block; 27 } 28 29 #scroller div::scroll-marker { 30 counter-increment: test; 31 content: counter(test); 32 width: 30px; 33 height: 30px; 34 background-color: blue; 35 border-radius: 100%; 36 display: inline-block; 37 } 38 39 #scroller #first::scroll-marker { 40 background-color: purple; 41 margin-right: 4px; 42 } 43 </style> 44 <div id="scroller"> 45 <div id="first"></div> 46 <div></div> 47 </div>