position-area-pseudo-element-implicit-anchor-dynamic.html (898B)
1 <!DOCTYPE html> 2 <title>Implicit anchor element for pseudo-elements using anchor functions - dynamic change</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: 200px; 9 margin-left: 200px; 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.moved { 21 margin-top: 100px; 22 margin-left: 50px; 23 } 24 #target::before { 25 position-area: center right; 26 background: green; 27 content:''; 28 } 29 #target::after { 30 position-area: bottom center; 31 background: green; 32 content:''; 33 } 34 </style> 35 <div id=target></div> 36 <script> 37 target.offsetTop; 38 target.classList.add("moved"); 39 </script>