Untitled fiddle

HTML

<div class="card">
  <p class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <div class="card__links">
    <a class="card__link card__link--primary" href="#link1">Primary</a>
    <a class="card__link" href="#link2">Secondary</a>
  </div>
</div>

CSS

.card {
  border: 1px solid #ccc;
  contain: layout; /*!*/
  padding: 1em;
  inline-size: 20ch;

  .card__content {
    margin: 0 0 1em;
  }

  .card__links {
    display: flex;
    gap: 1em;
    justify-content: space-between;
    position: relative;
  }

  .card__link:hover {
    color: red;
  }
  
  .card__link--primary::after {
    content: "";
    position: fixed; /*!*/
    inset: 0;
  }

  .card__link--primary:focus-within:after {
    outline: 1px solid red;
  }

  .card__link:not(.card__link--primary) {
    position: relative;
    z-index: 1;
  }
}

body, html {
  align-items: center;
  block-size: 100%;
  display: flex;
  place-content: center;
}