CSSの疑似要素だけで矢印を作る方法

「もっと見る」ボタンやアコーディオンの開閉部分など、ちょっとした矢印アイコンが欲しい場面、結構ありますよね。わざわざ画像を用意するほどでもないので、CSSの疑似要素(before・after)だけで作ってしまいましょう。画像を読み込まない分、表示も軽くなります。

目次非表示

HTML
CSS
まとめ

目次へ

HTML

今回はpタグをベースに作成していきます。クラス名を「arrow」とすれば、HTML側の準備はこれだけです。

<p class="arrow"></p>

CSS

続いてCSSです。::beforeで矢印の軸(横棒)を、::afterで矢印の先端(くの字)を作り、2つを重ねることで矢印の形にしています。::before・::afterをposition: absolute;で配置する基準にするため、親要素の.arrowにはposition: relative;を忘れずに指定してください。

.arrow {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 9%;
    width: 8px;
    height: 2px;
    background: #333;
    transition: 0.3s;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 9%;
    width: 6px;
    height: 6px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(45deg);
    transition: 0.3s;
  }

  &:hover {
    &::before {
      background: #333;
    }
    &::after {
      border-top: 2px solid #333;
      border-right: 2px solid #333;
    }
  }
}

ホバー時の色を変える処理も入れているので、リンクやボタンに使うと「押せそう感」が出しやすくなります。矢印の向きを変えたい場合は、::afterのborder-top・border-rightの組み合わせとrotate()の角度を調整してください(例: 上向きにしたいならrotate(-135deg)など)。

💡 今はSassを入れなくても書ける

上のコードは&を使ったネスト(入れ子)記法で、以前はSass(SCSS)がないと書けませんでした。ですが2023年以降、この書き方はCSSの標準機能として全ての主要ブラウザでサポートされています。すでにSassでビルド環境を組んでいるなら今まで通りで問題ありませんが、「この矢印だけのために新しくSassを導入する」必要はもうありません。素のCSSファイルにそのまま貼り付けて使えます。