<main>
  <div class="anchor">My Anchor</div>
  <div class="target">My Target</div>
</main>

.anchor {
  anchor-name: --my-anchor;
}

.target {
  position: absolute;
  position-anchor: --my-anchor;

  top: anchor(bottom);
}

@supports not (position-anchor: --my-anchor) {
  .target {
    display: none;
  }

  .anchor {
    position: relative;
    display: flex;
    justify-content: center;
  }

  .anchor::before {
    content: "My Target";

    position: absolute;
    top: 100%;
  }
}

/* Aesthetic Changes */

*,
*:before,
*:after {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

main {
  display: grid;
  place-items: center;

  height: 100vh;
}

.anchor {
  padding: 10px 30px;

  color: white;
  background: black;

  border: 4px solid transparent;
}

.target {
  padding: 10px 30px;
  margin: 5px;
  border: 3px dotted black;
}

@supports not (position-anchor: --my-anchor) {
  .anchor::before {
    padding: 10px 30px;
    margin: 5px;
    border: 3px dotted black;

    width: max-content;

    color: black;
  }
}

@supports (background: oklch(0% 0 0)) {
  .anchor {
    background: linear-gradient(to bottom, black, black) padding-box,
      linear-gradient(
          oklch(72.23% 0.185 48.78),
          oklch(66.02% 0.092 201.62),
          oklch(66.02% 0.092 201.62)
        )
        border-box;
  }
}