column-scroll-marker-006-ref.html (1255B)
1 <!DOCTYPE html> 2 <title>CSS Test Ref: ::column::scroll-marker:target-currentis supported</title> 3 <style> 4 #container { 5 overflow: hidden; 6 columns: 3; 7 column-fill: auto; 8 gap: 0; 9 orphans: 1; 10 widows: 1; 11 height: 100px; 12 border: 15px solid; 13 line-height: 20px; 14 scroll-marker-group: before; 15 background: yellow; 16 } 17 #scroll-marker-group { 18 display: flex; 19 justify-content: space-between; 20 height: 50px; 21 background: cyan; 22 } 23 .scroll-marker { 24 display: flex; 25 justify-content: center; 26 align-items: center; 27 width: 50px; 28 height: 50px; 29 background: hotpink; 30 content: "*"; 31 } 32 #scroll-marker-active { 33 background: green; 34 } 35 </style> 36 <div style="width:450px;"> 37 <div id="scroll-marker-group"> 38 <div class="scroll-marker" id="scroll-marker-active"><a href="#">*</a></div> 39 <div class="scroll-marker"><a href="#">*</a></div> 40 <div class="scroll-marker"><a href="#">*</a></div> 41 <div class="scroll-marker"><a href="#">*</a></div> 42 <div class="scroll-marker"><a href="#">*</a></div> 43 </div> 44 <div id="container"> 45 First column<br> 46 <br> 47 <br> 48 <br> 49 <br> 50 Second column<br> 51 <br> 52 <br> 53 <br> 54 <br> 55 Third column<br> 56 </div> 57 </div>