<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.