リンクテキストをhoverしたときに、元々つけてある背景色を矢印型に変えます。次のサンプルの薄い青色背景のテキストリンクにhoverすると、背景がピンクの矢印に変化して、リンク先へ進むよう促します。また、クリックすると矢印は濃いピンクに変わります。

サンプルのhtmlソース

<div class="wrapper">
  <p>「経費節減+顧客満足度UP」を図るなら、WEB受注をお勧めします！！まずは受注全体の50%を
  WEB受注にしてみてはいかがでしょう。　<a href="#">WEB受注システム&nbsp;百万石</a>　なら
  既存システムの変更不要で即行稼動します！！ また、定期的に得意先へ配達・回収を行なっている
  企業様の「受注業務のWEB化」と、ドライバーへの配達指示や回収数報告を効率的に管理するなら　
  <a href="#">定期配達・回収品管理システム</a>　をお勧めします！！受注データを元にした配送
  手配や、配送リストをドライバーへ提供することも可能です。</p>	
</div>

サンプルのhtmlソース

.wrapper p {
  padding: 12px;
  width: 100%;
  max-width: 840px;
  line-height: 1.4;
	font-size:24px;
}
.wrapper a {
  display: inline-block;
  position: relative;
  color: #343434;
  text-decoration: none;
  padding: 0 6px;
}
.wrapper a:before, a:after {
  will-change: transform;
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
}
.wrapper a:before {
  -webkit-transition: 100ms ease-out 50ms;
  transition: 100ms ease-out 50ms;
  -webkit-transform-origin: 0 24px;
          transform-origin: 0 24px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #cfdfff;
}
.wrapper a:after {
  -webkit-transition: 50ms ease-out;
  transition: 50ms ease-out;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  bottom: 2px;
  right: -12px;
  border: 8px solid transparent;
  border-left-color: #c7e;
}
.wrapper a:hover:before {
  -webkit-transition: 100ms ease-out;
  transition: 100ms ease-out;
  -webkit-transform: scaleY(0.18);
          transform: scaleY(0.18);
  background: #c7e;
}
.wrapper a:hover:after {
  -webkit-transition: 50ms ease-out 100ms;
  transition: 50ms ease-out 100ms;
  -webkit-transform: none;
          transform: none;
}
.wrapper a:active:before {
  -webkit-transition: 100ms ease-in;
  transition: 100ms ease-in;
  background: deeppink;
}
.wrapper a:active:after {
  -webkit-transition: 100ms ease-in;
  transition: 100ms ease-in;
  border-left-color: deeppink;
}