<div class="anchor">
  <p>⚓︎</p>
</div>

<div class="anchored-notice">
  <p>I am a <i>positioned element</i> that is tethered to the top of the <code>anchor</code> at my bottom. I also use justify-self for centering.<p>
</div>

/* The demo */
.anchor {
  anchor-name: --anchor-el;
}

.anchored-notice {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of anchored elem at top of anchor  */
  bottom: anchor(top);
  /*  Center  */
  justify-self: anchor-center;
}

/* Misc styling */

.anchor {
  background: linear-gradient(45deg, blueviolet, blue);
  font-size: 2rem;
  display: grid;
  place-items: center;
  border-radius: 100%;
  aspect-ratio: 1 / 1;
  width: 3.5rem;
  line-height: 0;
  margin-top: 60dvh;
  
  p {
    filter: brightness(2);
  }
}

.anchored-notice {
  font-family: system-ui, sans-serif;
  background: #333;
  border-radius: 0.75rem;
  color: white;
  padding: 1rem;
  max-width: 250px;
  line-height: 1.5;
}

code {
  font-family: monospace;
  background: dimgray;
  padding: 0.25rem;
  border-radius: 0.25rem;
  border: 1px solid gray;
}

body {
  display: grid;
  grid-template-rows: 1fr;
  justify-content: center;
  height: 100vh;
}