scope-pseudo-element-ref.html (1186B)
1 <!DOCTYPE html> 2 <title>@scope - pseudo-elements (ref)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-styles"> 4 <link rel="help" href="https://drafts.csswg.org/selectors-4/#link"> 5 6 <!-- Cosmetic --> 7 <style> 8 body > div { 9 display: inline-block; 10 width: 100px; 11 height: 100px; 12 border: 1px solid black; 13 vertical-align:top; 14 } 15 </style> 16 17 <!-- ::before --> 18 <style> 19 #before_test > main { 20 background-color: skyblue; 21 } 22 #before_test > main::before { 23 content: "B"; 24 width: 20px; 25 height: 20px; 26 display: inline-block; 27 background-color: tomato; 28 } 29 </style> 30 <div id=before_test> 31 <main> 32 Foo 33 </main> 34 </div> 35 36 <!-- ::after --> 37 <style> 38 #after_test > main { 39 background-color: skyblue; 40 } 41 #after_test > main::after { 42 content: "A"; 43 width: 20px; 44 height: 20px; 45 display: inline-block; 46 background-color: tomato; 47 } 48 </style> 49 <div id=after_test> 50 <main> 51 Foo 52 </main> 53 </div> 54 55 <!-- ::marker --> 56 <style> 57 #marker_test li { 58 background-color: skyblue; 59 } 60 #marker_test li::marker { 61 content: "M"; 62 } 63 </style> 64 <div id=marker_test> 65 <ul> 66 <li>One</li> 67 <li>Two</li> 68 </ul> 69 </div>