Spring/Bounce Hover Effect on links

Hi there,

that Code needs just a couple of tweaks - try this:

.entry-content p a {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: #ec407a;
}

.entry-content p a::after {
    content: "";
    background: rgba(236, 64, 122, 0.25);
    position: absolute;
    left: 12px;
    bottom: -6px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    z-index: -1;
    -webkit-transition: 0.35s cubic-bezier(0.25, 0.1, 0, 2.05);
    transition: 0.35s cubic-bezier(0.25, 0.1, 0, 2.05);
    z-index: 1;
}

.entry-content p a:hover:after {
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 100%;
}

Hello David,

Works perfectly! The only question I have is regarding .entry-content. How can I tell what is covered by that, or where can I find the other div classes and their respective content?

For example, with .entry-content when a heading is a link the effect is not applied. Should I then duplicate the code changing .entry-content for X that involves only headings or is there a simpler way?

Thank you for your input!

Easiest way is to use the browser developer tools.
Right Click and Inspect the element to open the tools and display its whereabouts in the Elements tab.

entry-content comes after the entry-header which is where the Post title and Meta are displayed.

The above code will only effect an <a>nchor that is within a <p>aragraph found within the entry-content. So no links inside other elements such as <h2> heading

Thank you for your help, David! It's clear now.

You're welcome