見出しの前につける「▶」マークをCSSで作ってみました！

最初は普通に

▶ ←この記号をそのまま使えばいいかなと思ったのですが、

フォントによって形が微妙に違ったり、サイズ調整が難しかったりして

なんだかしっくりこなくて…。

そこで今回はCSSで三角を作る方法に挑戦しました！

borderを使うと、こんな感じで三角が作れます👇

.title::before{

  content:"";

  display:inline-block;

  width:0;

  height:0;

  border-left:12px solid #8FAF8E;

  border-top:7px solid transparent;

  border-bottom:7px solid transparent;

  margin-right:10px;

}

線だけで作るので

✔ サイズ調整が自由

✔ 色も自由

✔ デザインと統一できる

というメリットがあって、見出しのデザインが一気に整いました✨

ちょっとした装飾ですが、こういう細かい部分をCSSで作れるようになると楽しいですね！

今日も一歩前進です☺️