テキストリンクに少し装飾をしたいと思い、hoverした時に矢印が伸びるcssをメモしておきました。

具体的な事例は下記になります

テキストリンクはこちら

ソースは下記になります

htmlは下記とします

<p class=”arrow-button”><a href=””>テキストリンクはこちら</a></p>

cssは下記になります

<style>
.arrow-button a {
  display:inline-block;
  cursor:pointer;
  position: relative;
  text-decoration: none;
}
.arrow-button a::after {
  content: “”;
  display: block;
  position: absolute;
  top: calc(50% – 5px);
  left: 90%;
  width: 40px;
  height: 5px;
  border: none;
  border-right: 2px solid #000;
  border-bottom: 1px solid #000;
  transform: skew(45deg);
  transition: .3s;
}
.arrow-button a:hover::after {
  position: absolute;
  top: calc(50% – 5px);
  left: 90%;
  width: 60px;
  height: 5px;
}
</style>