Untitled fiddle

by Mdot

HTML

<div class="card">
  <p class="card__copy">some text</p>
  <a class="card__link card__link--cover" href="https://pornhub.com">YouTube</a>
  <a class="card__link card__link--inline" href="https://reddit.com">Reddit</a>
</div>

CSS

.card {
  border: 1px solid;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 250px;
  padding: 10px;
  position: relative;
  width: 200px;

  .card__copy {
    margin: 0;
  }

  .card__link--cover {
    z-index: 20;
  }

  .card__link--cover::after {
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
  }

  .card__link--cover:hover {
    outline: 2px solid red;
  }

  .card__link--inline {
    position: relative;
    z-index: 20;
  }
}