<a href="#" class="box">
  <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus debitis optio, fugit, temporibus cupiditate ipsum dicta perferendis voluptate hic voluptatibus eos voluptatum libero quas laboriosam dolore earum commodi vitae. Beatae.
   </p>
</a>

<!-- Kudos to https://codepen.io/malyw/pen/KzZXRq --!>
.box {
  /* Does not exist as a CSS property: */
  --box-shadow-offset: 5px;
  box-shadow:
    var(--box-shadow-offset)
    var(--box-shadow-offset)
    10px
    rgba(0, 0, 0, 0.5);
}  

.box:hover {
  --box-shadow-offset: 10px;
}




/* etc. */
.box {
  display: block;
  border: 1px solid grey;
  padding: 1em;
  max-width: 20em;
  text-decoration: none;
  color: #000;
}

body {
  margin: 2em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.