[CSS]文字サイズに合わせた三角形を擬似要素でサクッと作る

文字サイズに合わせた三角形を擬似要素でサクッと簡単に作る方法です。

CSS &HTML

サンプル

擬似要素は「before」「after」どちらでも使えます。

.arrow::after {
  content: "";
  margin-left: 0.5em;
  display: inline-block;
  border-style: solid;
  border-width: 0.5em 0 0.5em 0.865em;
  border-color: transparent transparent transparent #000;
  transform: translateY(0.1em) scale(0.8);
}

HTMLは上記のクラスを設定するだけです。

<p class="arrow">概要はこちら</p>

方向を変える

プロパティ「transform」に「rotate」を追加するだけで、方向を変えられます。

下向き

.arrow-bottom::after {
  content: "";
  margin-left: 0.5em;
  display: inline-block;
  border-style: solid;
  border-width: 0.5em 0 0.5em 0.865em;
  border-color: transparent transparent transparent #000;
  transform: translateY(0.1em) scale(0.8) rotate(90deg);
}

左向き

.arrow-bottom::after {
  content: "";
  margin-left: 0.5em;
  display: inline-block;
  border-style: solid;
  border-width: 0.5em 0 0.5em 0.865em;
  border-color: transparent transparent transparent #000;
  transform: translateY(0.1em) scale(0.8) rotate(180deg);
}

上向き

.arrow-bottom::after {
  content: "";
  margin-left: 0.5em;
  display: inline-block;
  border-style: solid;
  border-width: 0.5em 0 0.5em 0.865em;
  border-color: transparent transparent transparent #000;
  transform: translateY(0.1em) scale(0.8) rotate(270deg);
}