Cool Link Style Applied to <a> in <p> tags

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 */
}

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer