| <!DOCTYPE html> |
| <title>@scope - pseudo-elements (ref)</title> |
| <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-styles"> |
| <link rel="help" href="https://drafts.csswg.org/selectors-4/#link"> |
| |
| <!-- Cosmetic --> |
| <style> |
| body > div { |
| display: inline-block; |
| width: 100px; |
| height: 100px; |
| border: 1px solid black; |
| vertical-align:top; |
| } |
| </style> |
| |
| <!-- ::before --> |
| <style> |
| #before_test > main { |
| background-color: skyblue; |
| } |
| #before_test > main::before { |
| content: "B"; |
| width: 20px; |
| height: 20px; |
| display: inline-block; |
| background-color: tomato; |
| } |
| </style> |
| <div id=before_test> |
| <main> |
| Foo |
| </main> |
| </div> |
| |
| <!-- ::after --> |
| <style> |
| #after_test > main { |
| background-color: skyblue; |
| } |
| #after_test > main::after { |
| content: "A"; |
| width: 20px; |
| height: 20px; |
| display: inline-block; |
| background-color: tomato; |
| } |
| </style> |
| <div id=after_test> |
| <main> |
| Foo |
| </main> |
| </div> |
| |
| <!-- ::marker --> |
| <style> |
| #marker_test li { |
| background-color: skyblue; |
| } |
| #marker_test li::marker { |
| content: "M"; |
| } |
| </style> |
| <div id=marker_test> |
| <ul> |
| <li>One</li> |
| <li>Two</li> |
| </ul> |
| </div> |
