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