<p>
<a href="#">Now, <em>that</em> is a spicy guacamole</a> 🥑
</p>
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;
}
/* PRESENTATIONAL STYLES */
body {
align-items: center;
display: flex;
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.