添加动画效果（CSS，HTML）时，超链接不起作用

Question

我做了一个线性动画效果，以动画化“单击进入”周围的边框。当我尝试使单词超链接时，它仅在刷新页面后几秒钟（动画开始之前）才起作用。稍后，当我将鼠标悬停在单词上时，没有指向另一个页面的超链接。

这是动画的代码：

.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><a href="content.html">Click to Enter</a></p>

出什么问题了？

Answer 1

这是因为伪元素位于a上方，只需调整z-index即可解决此问题：

.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><a href="content.html">Click to Enter</a></p>

顺便说一句，您可以使用如下所示的渐变来简化代码：

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><a href="content.html">Click to Enter</a></p>