メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

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

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

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

目次

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

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

    リンク

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

    a{
      position: relative;
      /*(サイズや色はお好きに)*/
    }
    a::after{
      content: "";
      display: block;
      width: 10px;
      height: 10px;
      position: absolute;
      right: 12px;
      top: 12px;
      border-top: solid 1px;
      border-right: solid 1px;
      transform: rotate(45deg);
      color: inherit;
    }

    これだけです。なんで気づかなかったのか…。

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

    - Thank you for reading this to the end. -

    コメントする

    CAPTCHA


    TOPへ Top