JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<div class="card">
  <div class="title">Titel der Karte <span class="notabene">(ohne Unterstreichung)</span></div>
  <p class="inhalt">Inhalt der Karte</p>
  <a href="#foo">Link in der Karte</a>
</div>

CSS

.card {
  position: relative;
  width: 50%;
  height: 10em;
  border: thin solid black;
}
.card:has(a:hover) .title {
  text-decoration-line: underline;
}
.card .title {
  background-color: #ccc;
  font-size: 150%;
  text-align: center;
}
.card .title .notabene {
  display: block;
  font-size: 70%;
  text-decoration-line: none !important;
}

.card > a {
  position: absolute;
  display: block;
  font-size: 0;
  top: 0; left: 0; width: 100%; height: 100%;
}