relative-box-order-of-pseudo-elements.html (1084B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: relative box order of pseudo elements</title> 4 <link rel="match" href="relative-box-order-of-pseudo-elements-ref.html"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-markers"> 6 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-buttons"> 7 <style> 8 div { 9 overflow: auto; 10 scroll-marker-group: after; 11 } 12 13 div::before { 14 background: red; 15 content: ""; 16 height: 20px; 17 width: 100px; 18 display: flex; 19 } 20 21 div > li { 22 background: orange; 23 height: 20px; 24 width: 100px; 25 display: flex; 26 } 27 28 div::after { 29 background: yellow; 30 content: ""; 31 height: 20px; 32 width: 100px; 33 display: flex; 34 } 35 36 div::scroll-button(up) { 37 background: green; 38 border: none; 39 content: ""; 40 height: 20px; 41 width: 100px; 42 display: flex; 43 } 44 45 div::scroll-button(right) { 46 content: ""; 47 border: none; 48 background: blue; 49 height: 20px; 50 width: 100px; 51 display: flex; 52 } 53 54 55 div::scroll-marker-group { 56 background: purple; 57 height: 20px; 58 width: 100px; 59 display: flex; 60 } 61 </style> 62 <div> 63 <li></li> 64 </div>