<h2>Proper anchor text in a box</h2>

<section>

  <!-- You can copy and paste as many "article" elements you want -->
  <article class="relative-element">
    <img src="https://andalu-seo.es/img/speakers/2024/carlos-sanchez.webp" width="300">
    <h3><a href="https://carlos.sanchezdonate.com/en/home/" class="anchor-text">Loremp Ipsum</a></h3>
    <div class="description">This is an ahrefs example of the description it can be in a box</div>
    <div class="other-elements">
      <dl class="data-ficha">
        <dt>Autor:</dt>
        <dd><a href="https://carlos.sanchezdonate.com/en/about-me/" title="Ir a la página del autor"> Carlos Sánchez</a><br></dd>
      </dl>
    </div>

  </article>

</section>
/* The CSS you need to do this effect*/
article.relative-element {
  position: relative;
}
a.anchor-text:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
  /*The background is just to check where the pseudelement is */
  background: #0000ff12;
}
/* If you want other clickable elemtents inside */
dd {
  z-index: 10;
  padding: 10px;
}

/* Here is just some CSS to make the box elements */
section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: auto;
  justify-content: space-evenly;
}
article.relative-element {
  width: 350px;
  box-sizing: border-box;
  border: 1px solid #0000005c;
  border-radius: 8px;
  background: #f5deb373;
  padding: 20px;
  margin: 10px;
}
article.relative-element img {
  object-fit: cover;
}
dl.data-ficha {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
dd {
  margin: 0px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.