【レスポンシブ可】CSSで疑似クラスを用いて矢印をカンタンに作成する

投稿日:2023/06/24　最終更新日:2023/06/24

【レスポンシブ可】CSSで疑似クラスを用いて矢印をカンタンに作成する

プログラミング

今回はCSSで疑似クラスを用いて矢印をカンタンに作成する方法を紹介します。

いきなりですが、例を下記に載せておきます。

test

画面を縮小拡大をして確認してみて下さい。

矢印がフォントサイズに追従して変化します。

これはレスポンシブサイト作成にかなり役立ちますので、覚えておくと良いです。

作り方

<p class="text"><span class="arrow">test</span></p>

.text {
  font-size: 2vw !important;
}

.arrow {
  padding: 0 1em 0 0;
  position: relative;
}

.arrow::after {
  border-top: .12em solid #000;
  border-right: .12em solid #000;
  content: '';
  display: inline-block;
  margin: auto;
  transform: rotate(45deg);
  position: absolute;
  inset: 0 6% 0 auto;
  height: .6em;
  width: .6em;
}

矢印の大きさはpタグのフォントサイズに依存します。

そのため、PCとスマホでフォントサイズを分けた場合でも個別に調整せずに矢印サイズが変化します。

メディアクエリを書かなくて良くなるのも楽になりますので、ぜひ使ってみて下さいね。