Hey all, might help some people but I added this recently to my site. Might not be for everyone but still pretty cool I think.
You can change the color of the text by modifying the “color:” and the border by modifying border-bottom, also the border grow by modifying the box shadow.
Also wanted to share just to encourage other people to share cool snippets we can all use.
https://i.redd.it/n8h9yyd2d34d1.gif
/* Link Style */
p a {
color: #0026e2;
text-decoration: none;
border-bottom: .250em solid #9fcbff;
transition: box-shadow 270ms cubic-bezier(0.77, 0, 0.175, 1), color 270ms cubic-bezier(0.77, 0, 0.175, 1);
}
p a:hover {
box-shadow: inset 0 -1.125em 0 rgba(229, 241, 255, 0.75); /* Transparent hover effect */
color: #0026e2;
}
p a:focus, p a:active {
color: #0026e2;
text-decoration: none;
border-bottom: .250em solid #9fcbff;
box-shadow: inset 0 -1.125em 0 rgba(229, 241, 255, 0.75); /* Transparent focus and active effect */
outline: none;
}
p a:visited {
background: #a9d1ff; /* Background color to stay after click */
color: #0026e2;
border-bottom: .250em solid #9fcbff; /* Optional: change border color for visited links */
}