position-area-pseudo-element-implicit-anchor.html (744B)
1 <!DOCTYPE html> 2 <title>Implicit anchor element for pseudo-elements using anchor functions</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#implicit"> 4 <link rel="match" href="position-area-pseudo-element-implicit-anchor-ref.html"> 5 <style> 6 body { margin: 0 } 7 #target { 8 margin-top: 100px; 9 margin-left: 50px; 10 width: 100px; 11 height: 100px; 12 background: blue; 13 } 14 #target::before, #target::after { 15 width: 100px; 16 height: 100px; 17 position: absolute; 18 position-anchor: auto; 19 } 20 #target::before { 21 position-area: center right; 22 background: green; 23 content:''; 24 } 25 #target::after { 26 position-area: bottom center; 27 background: green; 28 content:''; 29 } 30 </style> 31 <div id=target></div>