伪a：悬停＆amp; a：悬停：之前同时只使用CSS

Question

如何正确解决此问题？ 谢谢！

[https://jsfiddle.net/c4xrfLv5/]

Answer 1

这可以胜任：

＆＃13;

＆＃13;

figure.button figcaption {
  position: relative;

}
figure.button a {
  position: absolute;
  bottom: 100%;
  padding: 0px 25px;
  line-height: 40px;
  margin: 0;
  left: 0;
  font-weight: 400;
  background-color: #79A70A;
  color: #ffffff;
  text-decoration: none;
  transition: 2s;
}

figure.button a:after {
  position: absolute;
  left: 100%;
  border-style: solid;
  border-width:  0 0 40px 30px;
  border-color: transparent transparent transparent #79A70A;
  content: '';
  top: 0;
  transition: 2s;
}
figure.button a:hover {
  background-color: #858500;
}

figure.button a:hover:after {
  border-color: transparent transparent transparent #858500;
}

＆＃13;

<figure class="button">
<br><br><br><br>
<figcaption>
<a href="#">Read More</a>
</figcaption>
</figure>

＆＃13;

＆＃13;

＆＃13;

另外请确保使用:after代替:before，因为您的三角形形状位于元素之后;-)，只是为了使其正确！