Hyperlink doesn't work when animation effect is added (CSS, HTML) - html

Question

I did a linear animation effect to animate the border around the words"click to enter". When I tried to make words hyperlinked, it only works at a few seconds after I refresh the page (before the animation starts). Later when I hover over the words, there is no hyperlink directing to another page.
Here's the code for the animation:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
p {
position: relative;
color: black;
margin: 0;
font-size: 70px;
border: 7px solid transparent;
padding: 5px;
text-decoration: line-through;
text-align: center;
}
p::before {
content: '';
position: absolute;
top: -7px;
left: -7px;
width: 0;
height: 0;
background: transparent;
border: 7px solid transparent;
}
p:hover::before {
animation: myframes 1s linear forwards;
}
#keyframes myframes {
0% {
width: 0;
height: 0;
border-top-color: black;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {
width: 100%;
height: 0;
border-top-color: black;
border-right-color: black;
border-bottom-color: transparent;
border-left-color: transparent;
}
100% {
width: 100%;
height: 100%;
border-top-color: black;
border-right-color: black;
border-bottom-color: transparent;
border-left-color: transparent;
}
}
p::after {
content: '';
position: absolute;
top: -7px;
left: -7px;
width: 0;
height: 0;
background: transparent;
border: 7px solid transparent;
}
p:hover::after {
animation: myframes2 1s linear forwards;
}
#keyframes myframes2 {
0% {
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: black;
}
50% {
width: 0;
height: 100%;
border-top-color: transparent;
;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
}
100% {
width: 100%;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
}
}
<p>Click to Enter</p>
What's the problem?

Answer 1

It's because the pseudo element is positioned above the a, simply adjust z-index to fix this:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
p {
position: relative;
color: black;
margin: 0;
font-size: 70px;
border: 7px solid transparent;
padding: 5px;
text-decoration: line-through;
text-align: center;
z-index:0;
}
p::before {
content: '';
position: absolute;
top: -7px;
left: -7px;
width: 0;
height: 0;
background: transparent;
border: 7px solid transparent;
z-index:-1;
}
p:hover::before {
animation: myframes 1s linear forwards;
}
#keyframes myframes {
0% {
width: 0;
height: 0;
border-top-color: black;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {
width: 100%;
height: 0;
border-top-color: black;
border-right-color: black;
border-bottom-color: transparent;
border-left-color: transparent;
}
100% {
width: 100%;
height: 100%;
border-top-color: black;
border-right-color: black;
border-bottom-color: transparent;
border-left-color: transparent;
}
}
p::after {
content: '';
position: absolute;
top: -7px;
left: -7px;
width: 0;
height: 0;
background: transparent;
border: 7px solid transparent;
z-index:-1;
}
p:hover::after {
animation: myframes2 1s linear forwards;
}
#keyframes myframes2 {
0% {
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: black;
}
50% {
width: 0;
height: 100%;
border-top-color: transparent;
;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
}
100% {
width: 100%;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
}
}
<p>Click to Enter</p>
By the way, you can simplify you code using gradient like below:
p {
position: relative;
color: black;
margin: 0;
font-size: 70px;
border: 7px solid transparent;
padding: 5px;
text-decoration: line-through;
text-align: center;
background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(to bottom right,#000 50%,transparent 50.5%) 0 0 border-box;
background-size:auto,0 0;
background-repeat:no-repeat;
transition:1s all;
}
p:hover {
background-size:auto,200% 200%;
}
<p>Click to Enter</p>