Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>Implicit anchor element for pseudo-elements using anchor functions - dynamic change</title>
<link rel="match" href="position-area-pseudo-element-implicit-anchor-ref.html">
<style>
body { margin: 0 }
#target {
margin-top: 200px;
margin-left: 200px;
width: 100px;
height: 100px;
background: blue;
}
#target::before, #target::after {
width: 100px;
height: 100px;
position: absolute;
}
#target.moved {
margin-top: 100px;
margin-left: 50px;
}
#target::before {
position-area: center right;
background: green;
content:'';
}
#target::after {
position-area: bottom center;
background: green;
content:'';
}
</style>
<div id=target></div>
<script>
target.offsetTop;
target.classList.add("moved");
</script>