<main>
  <a href="https://andy-bell.design" class="fancy-link">
    <span class="fancy-link__text">More info</span>
    <svg class="[ icon ] [ fancy-link__icon ]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path fill="currentColor" fill-rule="nonzero" d="M7.43547133 19.4355653L14.7947168 12 7.43547133 4.56443467c-.58062844-.58664991-.58062844-1.53779734 0-2.12444724.58062844-.58664991 1.52201314-.58664991 2.10264158 0L19 12l-9.46188709 9.5600126c-.58062844.5866499-1.52201314.5866499-2.10264158 0-.58062844-.5866499-.58062844-1.5377974 0-2.1244473z"></path>
    </svg>
  </a>
  <hr />
  <a href="https://andy-bell.design" class="fancy-link fancy-link--large">
    <span class="fancy-link__text">More info</span>
    <svg class="[ icon ] [ fancy-link__icon ]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path fill="currentColor" fill-rule="nonzero" d="M7.43547133 19.4355653L14.7947168 12 7.43547133 4.56443467c-.58062844-.58664991-.58062844-1.53779734 0-2.12444724.58062844-.58664991 1.52201314-.58664991 2.10264158 0L19 12l-9.46188709 9.5600126c-.58062844.5866499-1.52201314.5866499-2.10264158 0-.58062844-.5866499-.58062844-1.5377974 0-2.1244473z"></path>
    </svg>
  </a>
</main>
body {
  font-family: sans-serif;
  background: #f9f9f9;
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

.fancy-link {
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  color: #17717a;
  font-weight: bold;
  text-decoration-skip-ink: auto;
}

.fancy-link:hover,
.fancy-link:focus {
  text-decoration: none;
}

.fancy-link--large {
  font-size: 2.5rem;
}

/* Because the icon's dimensions are set with ems, we can
   affect it's size using font size */
.fancy-link__icon {
  font-size: 1em;
}

/* Set the width and height to be 1em, which
   will be the font-size of its parent element */
.icon {
  width: 1em;
  height: 1em;
}

hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid #ccc;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.