CSSだけで作る！::beforeと::afterを使った矢印アイコンの実装方法【クラス名：.sample-arrow】

WebサイトやUIデザインで「矢印アイコン」はよく使われる要素のひとつ。
画像を使う方法もありますが、CSSだけで軽量＆柔軟に矢印を表現する方法をご存知ですか？

この記事では、CSSの::beforeや::after擬似要素を活用し、
画像を使わずに矢印を作るテクニックを紹介します。
クラス名は .sample-arrow として、簡単にコピペできるコード付きで解説します。

基本：CSSだけで作る「右向き矢印」

まずは、三角形の形で矢印を作るスタンダードな方法です。

▼ HTML

<div class="sample-arrow"></div>

▼ CSS

.sample-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #e98085; /* 矢印の色 */
  margin-left: 10px;
}

✔ ポイント解説

• width: 0; height: 0; → ボックスそのものを見えなくする
• border-leftに色をつけることで、右向きの三角を形成
• 他の3方向のborderに transparent を指定して非表示化

■ 応用：::beforeと::afterで作るスラッシュ型矢印

よりカスタム感のある、斜めラインを使った「▶」のような矢印も可能です。

▼ HTML

<div class="sample-arrow"></div>

▼ CSS

.sample-arrow {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
}

.sample-arrow::before,
.sample-arrow::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 3px;
  background-color: #e98085;
  top: 50%;
  left: 50%;
  transform-origin: left center;
}

.sample-arrow::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.sample-arrow::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

✔ メリット

• 線の太さや角度を自由に調整可能
• ホバーアニメーションとの相性も良好

■ 実装例の比較

スタイル	説明	クラス
三角形型	borderで描く矢印（軽量・応用しやすい）	.sample-arrow（border法）
スラッシュ型	before/afterを使ったカスタム矢印	.sample-arrow（斜線法）

■ まとめ

画像を使わず、CSSだけで作れる矢印アイコンは、

• ページの読み込み速度が速くなる
• 色やサイズを簡単に変更できる
• SVGやWebフォントに頼らず、軽量に実装できる

という大きなメリットがあります。
ぜひ .sample-arrow クラスを活用して、
あなたのWebデザインにスマートな矢印を取り入れてみてください。

おまけ：左矢印にしたいときは？

三角形の border-left を border-right に変えるだけでOK！

.sample-arrow-left {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 12px solid #e98085;
}

Favorite