pseudo-element-implicit-anchor-center.html (917B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: Originating element implicit anchor for pseudo elements using anchor-center</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#implicit"> 4 <link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> 5 <style> 6 #anchor { 7 display: flow-root; 8 margin-left: -50px; 9 margin-top: -50px; 10 width: 200px; 11 height: 200px; 12 } 13 #anchor::after { 14 content: ""; 15 position: absolute; 16 position-anchor: auto; 17 width: 100px; 18 height: 100px; 19 background: green; 20 /* Should be centered inside #anchor */ 21 place-self: anchor-center; 22 } 23 #ref { 24 margin-left: 50px; 25 margin-top: 50px; 26 width: 100px; 27 height: 100px; 28 background-color: red; 29 } 30 </style> 31 <p>Test passes if there is a filled green square.</p> 32 <div id="wrapper"> 33 <div id="anchor"> 34 <div id="ref"></div> 35 </div> 36 </div>