リンクの横に表示する 「>（大なり記号）」 を画像を使わずにCSSだけで作成する方法

リンクをボタンのように表示させる際、右側に大なり記号">"を使用しているのをよく見かけないでしょうか。

この時、テキストの">"をそのまま使うと楽ですが、角度が狭すぎたりしてあまり綺麗な形ではありませんよね。
なので、私はいつも画像で表示していました。

ですが、CSSだけで綺麗な ">"を描くことができることに気づいたので、その方法をメモしていこうと思います。

::after擬似要素にボーダーを付けて回転させるだけ

やり方は章タイトルの通りなんですが、とりあえず、実際に表示させてみます。

リンク

綺麗な90度です。ソースは次のようになります。

a{
  position: relative;
  /*(サイズや色はお好きに)*/
}
a::after{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  right: 16px;           //好きな位置で
  top: calc(50% - 2px);  //ボーダーの太さ分を引く
  border-top: solid 2px;
  border-right: solid 2px;
  transform: rotate(45deg) translateY(-50%);
  color: inherit;
}

これだけです。

サイズ感はその都度調節しないといけないですが、表示速度がシビアな案件で画像をあまり使用できない場合などに便利な方法だと思います。