<span class="link"><a href="#">Now, <em>that</em> is a spicy guacamole <span>🥑</span></a></span>
span a {
color: #007db5;
}
a:hover {
background: linear-gradient(90deg, #ff8a00, #e52e71);
-webkit-background-clip: text;
-webkit-box-decoration-break: clone;
-webkit-text-fill-color: transparent;
box-decoration-break: clone;
text-shadow: none;
}
a > span {
-webkit-text-fill-color: initial;
}
/* PRESENTATIONAL STYLES */
body {
align-items: center;
display: grid;
font-size: 2rem;
height: 100vh;
justify-content: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.