<a href="#" class="link"><span class="link__arrow">&#10147;</span><span class="link__text">It's my link</span></a>
.link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  margin: 10px;
}
.link__arrow {
  display: inline-block;
  transition: transform 0.3s, color 0.3s;
  will-change: transform, color;
  transform: rotate(180deg);
  font-size: 24px;
  color: #43bfab;
}
.link__text {
  color: #43bfab;
  font-size: 24px;
  display: inline-block;
  padding-left: 20px;
  transition: color 0.3s;
  will-change: color;
}
.link:hover .link__arrow, .link:focus .link__arrow {
  transform: rotate(90deg);
  color: red;
}
.link:hover .link__text, .link:focus .link__text {
  color: red;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.