column-scroll-marker-001.html (1143B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://www.w3.org/TR/css-multicol-2/#column-pseudo"> 4 <link rel="match" href="column-scroll-marker-001-ref.html"> 5 <style> 6 #container { 7 overflow: hidden; 8 columns: 3; 9 column-fill: auto; 10 gap: 0; 11 orphans: 1; 12 widows: 1; 13 height: 100px; 14 border: 15px solid; 15 line-height: 20px; 16 scroll-marker-group: before; 17 background: yellow; 18 } 19 #container::scroll-marker-group { 20 display: flex; 21 justify-content: space-between; 22 height: 50px; 23 background: cyan; 24 } 25 #container::column::scroll-marker { 26 display: flex; 27 justify-content: center; 28 align-items: center; 29 width: 50px; 30 height: 50px; 31 background: hotpink; 32 content: "*"; 33 } 34 </style> 35 <div style="width:450px;"> 36 <div id="container"> 37 First column<br> 38 <br> 39 <br> 40 <br> 41 <br> 42 Second column<br> 43 <br> 44 <br> 45 <br> 46 <br> 47 Third column<br> 48 <br> 49 <br> 50 <br> 51 <br> 52 Fourth column<br> 53 <br> 54 <br> 55 <br> 56 <br> 57 Fifth column<br> 58 </div> 59 </div>