从以下：伪元素

Question

我有一个链接动画，并且有一个带有伪元素的链接，该元素在链接之前创建内容。但是，这个伪内容应该（a）不能作为可点击链接，（b）动画不应该扩展到它。

我已经尝试了所有我能想到的但无法解决的问题。

任何人都可以帮助我吗？

＆＃13;

＆＃13;

a {
  color: transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  text-shadow: 0 0 #141414, 0.08em 0 0 #fff, 0 0, -0.08em 0 0 #fff;
  vertical-align: bottom;
}

a:after {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 1))) center 1.08em/100% 2px no-repeat;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) center 1.08em/100% 2px no-repeat;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  width: 400%;
  will-change: transform;
  z-index: -1;
}

a:hover::after {
  -webkit-animation: underline-gradient 6s linear infinite;
  animation: underline-gradient 6s linear infinite;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(122, 95, 255, 0.8)), color-stop(35%, rgba(1, 255, 137, 0.6)), color-stop(85%, rgba(122, 95, 255, 0.8)));
  background-image: linear-gradient(90deg, rgba(122, 95, 255, 0.8) 15%, rgba(1, 255, 137, 0.6) 35%, rgba(122, 95, 255, 0.8) 85%);
}

@-webkit-keyframes underline-gradient {
  0% {
    -webkit-transform: translate3d(0%, 0%, 0);
    transform: translate3d(0%, 0%, 0);
  }
  100% {
    -webkit-transform: translate3d(-75%, 0%, 0);
    transform: translate3d(-75%, 0%, 0);
  }
}

@keyframes underline-gradient {
  0% {
    -webkit-transform: translate3d(0%, 0%, 0);
    transform: translate3d(0%, 0%, 0);
  }
  100% {
    -webkit-transform: translate3d(-75%, 0%, 0);
    transform: translate3d(-75%, 0%, 0);
  }
}

a::before {
  content: '| \a0\a0 \0020';
  font-family: FontAwesome;
  background-image: none !important;
  background: none !important;
  transform: none !important;
  transition-property: none !important;
  animation: none !important;
}

a:hover::before {
  content: '| \a0\a0 \0020';
  color: red;
  font-family: FontAwesome;
  background-image: none !important;
  background: none !important;
  transform: none !important;
  transition-property: none !important;
  animation: none !important;
}

＆＃13;

<span style="font-size:50px">
Here is a <br><br><a href="#">link</a> <br><br>as an example.
</span>

＆＃13;

＆＃13;

＆＃13;

Answer 1

伪内容不应作为可点击链接

为此，您必须将position:absolute和否定left以及pointer-events:none设置为伪元素。还margin-left标记为<a>。

动画不应扩展到伪内容

为此，您必须使用<span>标记作为线性背景动画。将overflow:hidden应用于此<span>而不是<a>

Stack Snippet

＆＃13;

＆＃13;

$("a.link").append("<span></span>")

＆＃13;

a {
  color: transparent;
  display: inline-block;
  position: relative;
  text-decoration: none;
  text-shadow: 0 0 #141414, 0.08em 0 0 #fff, 0 0, -0.08em 0 0 #fff;
  vertical-align: bottom;
  margin-left: 50px;
}

a>span {
  overflow: hidden;
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

a span:after {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 1))) center 1.08em/100% 2px no-repeat;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) center 1.08em/100% 2px no-repeat;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  width: 400%;
  will-change: transform;
  z-index: -1;
}

a:hover span::after {
  -webkit-animation: underline-gradient 6s linear infinite;
  animation: underline-gradient 6s linear infinite;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(122, 95, 255, 0.8)), color-stop(35%, rgba(1, 255, 137, 0.6)), color-stop(85%, rgba(122, 95, 255, 0.8)));
  background-image: linear-gradient(90deg, rgba(122, 95, 255, 0.8) 15%, rgba(1, 255, 137, 0.6) 35%, rgba(122, 95, 255, 0.8) 85%);
}

@-webkit-keyframes underline-gradient {
  0% {
    -webkit-transform: translate3d(0%, 0%, 0);
    transform: translate3d(0%, 0%, 0);
  }
  100% {
    -webkit-transform: translate3d(-75%, 0%, 0);
    transform: translate3d(-75%, 0%, 0);
  }
}

@keyframes underline-gradient {
  0% {
    -webkit-transform: translate3d(0%, 0%, 0);
    transform: translate3d(0%, 0%, 0);
  }
  100% {
    -webkit-transform: translate3d(-75%, 0%, 0);
    transform: translate3d(-75%, 0%, 0);
  }
}

a::before {
  content: '| \a0\a0 \0020';
  font-family: FontAwesome;
  background-image: none !important;
  background: none !important;
  transform: none !important;
  transition-property: none !important;
  animation: none !important;
  position: absolute;
  left: -50px;
  pointer-events: none;
}

a:hover::before {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<span style="font-size:50px">
Here is a <br><br><a class="link" href="#">link</a><br><br>as an example.

＆＃13;

＆＃13;

＆＃13;